微信小程序 上传图片

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

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