小程序批量上传图片，并更新图片状态踩坑解决
效果：
小程序上传函数 wx.uploadFile(Object object)应该是用了线程发送的，异步处理请求的,如果遍历获取到路径后上传的话，会出现异常，因为发送请求后，数组会往下一个索引走，不等请求返回结果的，所以上传状态没法获取到后台返回的结果
界面：
未上传
已上传
选择图片触发的函数：
goTakePic: function(e) { //启动拍照功能或者从相册里选择图片
console.log("拍照")
console.log(e.currentTarget.id);
var id = e.currentTarget.id;
id = id.split("_")[1];
console.log(id)
var that = this;
wx.chooseImage({
count: 9, // 最多可以选择的图片张数，默认9
sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
success: function(res) {
// success
console.log(res)
console.log(res.tempFilePaths)
var key = "src_" + id;
var new_path_array = []; //创建带状态的路径集
console.log("循环")
for (var path in res.tempFilePaths) {
console.log(res.tempFilePaths[path])
var new_path = {}
new_path["upload_status"] = 0; //未上传状态
new_path["id"] = "" //用于保存后台返回的图片id
new_path["path"] = res.tempFilePaths[path]
new_path_array.push(new_path)
}
console.log("新数组路径")
console.log(new_path_array)
src_json["src_" + id] = src_json["src_" + id].concat(new_path_array)
//console.log("结果："+src_json["src_" + id])
switch (id) {
case "comp":
that.setData({
src_comp: src_json["src_" + id]
})
break
case "door":
that.setData({
src_door: src_json["src_" + id]
})
break
case "business":
that.setData({
src_business: src_json["src_" + id]
})
break
case "doc":
that.setData({
src_doc: src_json["src_" + id]
})
break
case "product":
that.setData({
src_product: src_json["src_" + id]
})
break
case "other":
that.setData({
src_other: src_json["src_" + id]
})
break
}
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
arr是要上传的图片路径数组，arr数组结构为:
[{upload_status: 0, path: "http://tmp/wxa1fd91bd32bf7481.o6zAJswDOgl7nijr8CZf….sUPpf8epWNsZ53771955908686b17d4e2ac93d9a51c9.png"},
{upload_status: 0, path: "http://tmp/wxa1fd91bd32bf7481.o6zAJswDOgl7nijr8CZf….gJWRzXilmRebd35abde6fe5e4b1e5adb6bc73c0a9797.png"}]
src_json结构
var src_json: {
src_comp: [],
src_door: [],
src_business: [],
src_doc: any[],
src_product: [],
src_other: []
}
下面是用for遍历图片数组上传,在上传成功后success函数中修改upload_status状态，但是很遗憾，小程序上传用的是线程发送，这个状态没法改变，因为i会变了，不是对应哪个图片的i
upload: function (key,that,arr, photoType){
console.log("进入上传函数")
console.log(arr)
var len = arr.length
for (var i = 0; i < len; i++) { //遍历数组，上传图片
console.log("遍历")
var upload_task = wx.uploadFile({ //发送上传请求
url: url + '/survey/' + taskId + "/" + photoType + '/photo',
filePath: arr[i].path,
name: "file",
header: {
"content-type": "multipart/form-data",
"authorization": da.data.sessionId
},
success: function (res) {
console.log("上传成功")
console.log(res.data)
var data = JSON.parse(res.data) //转化成json
console.log(data)
if (data.status == true) {//后台返回的上传成功状态
console.log("jin")
console.log(i)
src_json[key][i].upload_status = 1 //更改当前图片的状态为已上传
}
},
fail: (res) => {
console.log("上传失败")
console.log(res.data)
// stat = 0;
},
complete:function(res){
}
})
}
},
这种怎么解决？应该用递归调用函数来解决这个问题，下面是递归函数写法替换for循环：
//index是数组下标索引只，一开始传入是0
//
upload: function(key, index, that, arr, photoType) {
console.log("进入上传函数")
console.log(arr)
var len = arr.length
var upload_task = wx.uploadFile({ //发送上传请求
url: url + '/survey/' + taskId + "/" + photoType + '/photo',
filePath: arr[index].path,
name: "file",
header: {
"content-type": "multipart/form-data",
"authorization": da.data.sessionId
},
success: function(res) {
console.log("上传成功")
console.log(res.data)
var data = JSON.parse(res.data)
console.log(data)
if (data.status == true) {
console.log("jin")
src_json["src_" + key][index].upload_status = 1
switch (key) { //下面代码是实时更新了图片状态的，每上传一片，就更新一次data的值，这样前端显示图片状态就会改变
case "comp":
that.setData({
src_comp: src_json["src_" + key]
})
break
case "door":
that.setData({
src_door: src_json["src_" + key]
})
break
case "business":
that.setData({
src_business: src_json["src_" + key]
})
break
case "doc":
that.setData({
src_doc: src_json["src_" + key]
})
break
case "product":
that.setData({
src_product: src_json["src_" + key]
})
break
case "other":
that.setData({
src_other: src_json["src_" + key]
})
break
}
index++;
console.log(index)
}
},
fail: (res) => {
console.log("上传失败")
console.log(res.data)
// stat = 0;
},
complete: function(res) {//解决循环问题，这里递归调用
if (index == len) {//当下标索引等于长度，停止递归调用
console.log(index)
wx.showToast({
title: '上传完成',
icon: 'success',
duration: 2000
})
} else {
console.log("长度小于数组长度")
console.log('正在上传第' + index + '张');
that.upload(key, index, that, arr, photoType) //递归
}
}
})
}
上传函数的调用：
that.upload("business", 0, that, up, photoType)