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