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

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

  • 1***@qq.com

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

    2019-03-10 13:17

  • 是在下输了

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

    2019-03-12 17:52

  • 是在下输了

    回复 1***@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

  • 1***@qq.com

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

    2019-03-27 22:14

  • 大小冬天

    回复 是在下输了: 不好使啊

    2021-03-05 19:53

1***@163.com

1***@163.com

插件市场有个 image-tools

回梦無痕

回梦無痕 - 暂停服务

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

  • 4***@qq.com

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

    2018-12-22 21:56

  • LEARNER0

    是啊。说下啊

    2018-12-27 17:09

  • 大鼻子 (作者)

    使用upng

    2018-12-28 14:05

  • 大鼻子 (作者)

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

    2018-12-28 14:15

  • 8***@qq.com

    回复 大鼻子: 插件市场地址给一个 ,我也遇到这个问题了

    2020-01-04 15:53

  • 夜空中最大的星

    回复 qingshengsky: 问题解决了吗?我也遇到这个问题,base64的图片在pc端可以上传,在手机上就不可以,后台接收也为空

    2020-09-19 16:50

4***@qq.com

4***@qq.com

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

BoredApe

BoredApe - 有问题就会有答案。

// 将图片转换为 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);  
        });  
      });  
    }
  • 4***@qq.com

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

    2019-05-23 11:38

4***@qq.com

4***@qq.com

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

该问题目前已经被锁定, 无法添加新回复