微信小程序 上传图片

上传图片功能应该是现在比较常见的需求了，但是上传的图片大小、压缩、个数限制以及回显点击放大等还是比较麻烦。

这里我简单以uniapp举例说一下常用的方法以及实现的逻辑

首先上传图片需要调用chooseImage ，这里需要说一下count ，默认为最多9可以上传9张图

//最多9张图，this.imgArr为已上传的图片，如果只是1张图的话，可以直接指定count 为1

let count = 9 - this.imgArr.length;

uni.chooseImage({

　　count,

　　sourceType: [\'album\',\'camera\'],

　　sizeType: [\'compressed\'],

　　success(res) {

　　　　if(res.errMsg ==\'chooseImage:ok\'){

　　　　　　//res.tempFilePaths 为返回的图片数组

　　　　　　console.log(res.tempFilePaths)

　　　　}

　　}

})

然后需要涉及到给后端传递的数据为什么类型，如果为base64的话，那我们还需对res.tempFilePaths 进行转换

//使用arrayBufferToBase64，但是部分ios机型不兼容

uni.request({
    url,
    method:\'GET\',
    responseType: \'arraybuffer\',
    success: ress => {
        let base64 = wx.arrayBufferToBase64(ress.data); 
        if(type == \'mp4\'){
            base64=`data:video/mp4;base64,${base64}`
        }else{
            base64=`data:image/jpg;base64,${base64}`
        }
        console.log(base64)
    }
})    

兼容解决方案

urlTobase64 =(url)=>{
　　let type=url.substring(url.lastIndexOf(\'.\')+1)
　　if(url.indexOf(\'.jpg\')>0 || url.indexOf(\'.JPG\')>0 || url.indexOf(\'.PNG\')>0 ||         url.indexOf(\'.png\')>0 || url.indexOf(\'ttp://tmp/\')>0 || url.indexOf(\'xfile://tmp\')>0){
    return new Promise((resolve,reject)=>{
        wx.getFileSystemManager().readFile({
            filePath:url,
            encoding:\'base64\',
            success:  res=>{
                let base64=\'\';
                if(type == \'mp4\'){
                    base64=`data:video/mp4;base64,${res.data}`
                }else{
                    base64=`data:image/jpg;base64,${res.data}`
                }
                resolve(base64)
        　 }
　　　})
　　})
　}else{
　　　return new Promise((resolve,reject)=>{
　　　　　　uni.request({
        　　　url,
        　　　method:\'GET\',
        　　　responseType: \'arraybuffer\',
        　　　success: ress => {
        　　　　　let base64 = wx.arrayBufferToBase64(ress.data); 
                if(type == \'mp4\'){
                　　base64=`data:video/mp4;base64,${base64}`
                }else{
                　　base64=`data:image/jpg;base64,${base64}`
                }
                resolve(base64)
        　　　}
　　　　　　})
　　　　})
　　}     
};