大鼻子
大鼻子
  • 发布:2018-12-13 13:58
  • 更新:2019-05-23 14:49
  • 阅读:3584

uni-app 上传图片base64怎么转换

分类:uni-app

网上看了很多资料,有提到用wx.arrayBufferToBase64(),在APP里面试过,不管用,uni-app里面的canvas也没有找到可以转换的方法,有没有前辈们做过类似的,可否分享一下,谢谢!

2018-12-13 13:58 分享
已邀请:
大鼻子

大鼻子 (作者)

fileUpload() {  

                let _this = this;  
                uni.chooseImage({  
                    count: 1,  
                    success: res => {  
                        uni.showLoading({  
                            title: "上传中",  
                            mask: true  
                        })  
                        this.urlTobase64(res.tempFilePaths[0]);  
                    }  
                })  
            },  
            // 获取图片信息  
            urlTobase64(url){  
                const ctx = wx.createCanvasContext('canvas');  
                const platform = wx.getSystemInfoSync().platform  
                const imgWidth = 400, imgHeight=500;  
                ctx.drawImage(url, 0, 0, imgWidth, imgHeight);  
                ctx.draw(false, () => {  
                wx.canvasGetImageData({  
                    canvasId: 'canvas',  
                    x: 0,  
                    y: 0,  
                    width: imgWidth,  
                    height: imgHeight,  
                    success: res => {  
                      // 3. png编码  
                      let pngData = upng.encode([res.data.buffer], res.width, res.height)  
                      // 4. base64编码  
                      let base64 = wx.arrayBufferToBase64(pngData)  
                      console.log('data:image/jpeg;base64,' + base64)  
                      this.imageList.push(base64);  
                      uni.hideLoading();  
                    },  
                    fail(res) {  
                      console.log(JSON.stringify(res));  
                      uni.hideLoading();  
                    },  
                  })  
                })  
            },

下载upng插件

  • 是在下输了

    运行成H5页面之后,这个方法还能用吗???还是这个方法只能运行在小程序环境

    2019-02-22 16:26

  • 1531464644@qq.com

    回复 是在下输了:后面你怎么解决?我也遇到了

    2019-03-10 13:17

  • 是在下输了

    @1531464644@qq.com我使用的也是楼主的方法,但是因为我这儿需要预览,这样做出来之后效果不好,后面改成文件上传,建议能文件上传就别转base64,文件上传简单快捷,转了之后各种问题

    2019-03-12 17:52

  • 是在下输了

    回复 1531464644@qq.com:

    urlTobase64(url){

    const ctx = uni.createCanvasContext('canvas');

    const platform = uni.getSystemInfoSync().platform

    const imgWidth = 300, imgHeight=300;

    ctx.drawImage(url, 0, 0, imgWidth, imgHeight);

    ctx.draw(false, () => {

    uni.canvasToTempFilePath({

    x: 0,

    y: 0,

    width:imgWidth,

    height:imgHeight,

    canvasId: 'canvas',

    quality: Number(1),

    success: res => {

    console.log(res);

    this.imageList=res.tempFilePath;//base64

    },

    fail(res) {

    console.log(JSON.stringify(res));

    },

    })

    })

    },

    2019-03-12 17:56

  • 1453925044@qq.com

    his.imageList = res.tempFilePath; 获取的不是一个临时的路径地址吗,怎么可能是base64格式

    2019-03-27 22:14

回梦無痕

回梦無痕 - qq565766672,论坛私信不回,有需要请加QQ,付费咨询指导。

APP可以用H5 API转

var reader = new plus.io.FileReader();  
reader.onloadend = function (e) {  
      var speech = e.target.result;//base64图片                           
};  
reader.readAsDataURL(file);
  • 大鼻子 (作者)

    已经找到方法了,使用upng可以完美解决!谢谢!

    2018-12-14 08:53

大鼻子

大鼻子 (作者)

已完美解决,谢谢大家!

  • qingshengsky

    大哥 怎么解决的 我现在遇到一个问题 手机拍照上传转成base64 后台接收为空

    2018-12-20 10:38

  • 406040200@qq.com

    怎么解决的,到时说一下啊,大哥

    2018-12-22 21:56

  • LEARNER0

    是啊。说下啊

    2018-12-27 17:09

  • 大鼻子 (作者)

    使用upng

    2018-12-28 14:05

  • 大鼻子 (作者)

    代码贴出来了,插件大家自己下载一下吧

    2018-12-28 14:15

4336987@qq.com

4336987@qq.com

wx.arrayBufferToBase64,有没有替代方案?如果不是小程序怎么办?非小程序是否可用?

五块钱的果汁

五块钱的果汁 - 勤奋是一种被逼无奈 - 热爱是一种情不自禁~

// 将图片转换为 Base64  
    handleFile(path) {  
      return new Promise((resolve, reject) => {  
        plus.zip.compressImage({  
          src: path,  
          dst: `_doc/temp/${+new Date()}.jpg`,  
          quality: 70,  
        },  
        ({ target, size }) => {  
          plus.io.resolveLocalFileSystemURL(target, (file) => {  
            const fileReader = new plus.io.FileReader();  
            fileReader.readAsDataURL(file);  
            fileReader.onloadend = ({ target: { result } }) => {  
              resolve(result);  
            };  
          });  
        },  
        (e) => {  
          reject(e);  
        });  
      });  
    }
  • 4336987@qq.com

    plus is not defined;如何破,姿势才是正确的?

    2019-05-23 11:38

4336987@qq.com

4336987@qq.com

plus.zip.compressImage是不是不兼容小程序?

18373187467@163.com

18373187467@163.com

插件市场有个 image-tools

  • 915142737@qq.com

    功能的确是实现了,h5苹果小米三星都ok,就是客户的华为手机不行,也不知道为啥。

    1 天前

要回复问题请先登录注册