上传图片功能应该是现在比较常见的需求了，但是上传的图片大小、压缩、个数限制以及回显点击放大等还是比较麻烦。
这里我简单以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)
}
})
})
}
};
请发表评论