之前写过uni-app H5方式上传图片,但是在生成apk后,上传图片失败,不支持app上传。查找资料后解决app上传多图问题。
H5方式上传图片可参考:uni-appH5端canvas压缩图片
图片选择,每次最多选择4张,最多上传8张
chooseImage: async function() {
var that = this;
uni.chooseImage({
sourceType: ['camera', 'album'],
sizeType: ['compressed'],
count: 4,
success: (res) => {
if (that.img_url.length + res.tempFilePaths.length <= 8) {
for (var i = 0; i < res.tempFilePaths.length; i++) {
uni.getImageInfo({
src: res.tempFilePaths[i],
success: function(img) {
that.compressImage(img.path);
},
fail: function(err) {
}
});
}
} else {
uni.showToast({
title: this.staticinfo.tips[0],
icon: "none"
})
}
}
})
},
压缩图片 图文不能超过20Kb,并上传 that.uploadHead()
compressImage(img) {
var that = this
return new Promise((res) => {
var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', ''));
console.log('after' + localPath);
// 压缩
plus.io.resolveLocalFileSystemURL(localPath, (entry) => {
entry.file((file) => {
// 可通过entry对象操作图片
if (file.size > 20480) {
// 压缩后size 大于20Kb
plus.zip.compressImage({
src: img,
quality: 0.5,
}, (event) => {
console.log('success zip****' + event.size);
var fileReader = new plus.io.FileReader(); // 文件系统中的读取文件对象,用于获取文件的内容
fileReader.readAsDataURL(file); //以URL编码格式读取文件数据内容
fileReader.onloadend = function(evt) {
//读取文件成功完成的回调函数
console.log(evt.target.result.split(",")[1]) //拿到'data:image/jpeg;base64,'后面的
that.uploadHead(evt.target.result.split(",")[1], img)
}
}, function(error) {
uni.showModal({
content: '分享图片太大,需要请重新选择图片!',
showCancel: false
})
});
}
});
}, (e) => {
uni.showModal({
content: '分享图片太大,需要请重新选择图片!',
showCancel: false
})
});
})
},
上传图片
async uploadHead(img, blod) {
console.log("----img----" + JSON.stringify(img))
let opts = {
//接口地址
url: this.$request.SERVER_URL + this.interfaceUrl.baseConstant.appBase64ImgUpload,
//请求类型
method: 'post'
};
let param = {
//该请求所需要的参数
userId: this.userId,
token: this.token,
data: img, //图片的流数据
fileType: 'jpeg' //图片格式
};
const result = await this.$request.baseRequest(opts, param);
console.log(result)
console.log(opts)
if (result.status == "000") {
this.img_url = this.img_url.concat(result.imgUrl)
this.imageList = this.imageList.concat(blod)
} else {
uni.showModal({
content: result.msg,
showCancel: false
});
}
},