E企盈营销工具技术服务商 热线:4006-838-530

小程序批量上传图片,并更新图片状态踩坑解决

E企盈直播平台营销卖货系统

效果:小程序上传函数 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会变了,不是对应哪个图片的iupload: 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)

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序批量上传图片,并更新图片状态踩坑解决
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏