上传图片的流程是:本地将图片上传到——》微信临时服务器,能够返回临时图片文件地址——》再将临时图片文件地址传输给服务端——》服务端从微信服务器上下载临时图片文件保存在服务端上
这个流程有点绕,花了点时间,踩了几脚坑才成功。
1.图片选择框
<view class='upload'>
<image mode="aspectFitf" src="{{item}}" bindtap="chooseImg" wx:for="{{imageSrc}}" wx:key="{{index}}"></image>
</view>
data: {
imageSrc:["../../images/defaultImg.png"],// 初始显示预设图片
imageNum:0,
imageUploadFlag: true,
imageErr:'图片提交失败'
},
chooseImg: function () {
let that = this
wx.chooseImage({
count: 3, // 最多可以选择的图片张数,默认9
sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
success: function (res) {
// success
that.setData({
imageSrc: res.tempFilePaths,
imageNum: res.tempFilePaths.length
})
},
fail: function (res) {
// fail
app.showErr('提示', '上传失败,请重新上传图片');
}
})
},
2.上传图片
小程序不能批量多张图片上传,因此只能一个一个上传,所以最好封装上传图片的函数进行调用。
uploadImage: function (recordId, imageUrl,imageNo){
let that = this;
console.log(recordId, imageUrl, imageNo);
const uploadTask = wx.uploadFile({
url: app.globalData.serverUrl+'operationsrecord/image/add',
filePath: imageUrl,
name: 'image',
header: {
"Content-Type": "multipart/form-data",
'Cookie': 'JSESSIONID=' + app.globalData.sessionId
},
// 上传图片时可以携带的数据
formData: {
'id': recordId ,//运维记录id
'imageNum': imageNo,//图片顺序
'url': imageUrl
},
success: function (res) {
let data = res.data;
let success = data.match(/"success":(true|false)/g)[0].split(':')[1];
console.log(typeof(success),success);
if (success=="false"){
console.log('上传图片失败');
that.setData({
imageUploadFlag: false
})
}
// 判断最后一张图片上传
if(imageNo == that.data.imageNum){
wx.hideLoading();
if (that.data.imageUploadFlag){ // 全部提交成功
app.showOk('提交成功');
wx.reLaunch({
url: '../map/map',
})
}else{ // 其中有失败
app.showErr('出错', that.data.imageErr);
}
}
console.log(res)
}
})
}
调用时需要循环调用
let tempFilePaths = that.data.imageSrc;
for (let i = 0; i < that.data.imageNum;i++){
let imageUrl = tempFilePaths[i];
that.uploadImage(recordId,imageUrl,i+1);
}