微信小程序 上传图片

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

这里我简单以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)
	　　　}
　　　　　　})
　　　　})
　　}	
};