效果:
小程序上传函数 wx.uploadFile(Object object)应该是用了线程发送的,异步处理请求的,如果遍历获取到路径后上传的话,会出现异常,因为发送请求后,数组会往下一个索引走,不等请求返回结果的,所以上传状态没法获取到后台返回的结果
界面:
block wx:for="{{src_comp}}" class="block_nei" view class="block_nei" image class='addpic' src='{{item.path}}' data-index="comp_{{index}}" bindtap="previewImage" bindlongpress='deleteImg'/image text class='addpic_text2' text wx:if="{{item.upload_status == 0}}" style="color:#ff0404"未上传/text text wx:if="{{item.upload_status == 1}}" style="color:#76ffaa"已上传/text /text /view /block选择图片触发的函数:
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)














