小程序图片上传实现按序上传

140 阅读1分钟

前言:上一篇写的是小程序异步上传,然后这篇主要是对图片上传的在优化,提升用户体验

Tip: 所用的API上一篇有写(其实按序这方面主要用到递归函数,我好想忘得差不多了......(〒︿〒))

  async formSubmit(e) {    this.setData({      disabledBtn: true    })    if (this.data.input1.length == 0) {      this.setData({        form_input1: '',        input1: '',        disabledBtn: false      })      wx.showToast({        title: '请填写反馈内容',        icon: 'none',        duration: 2000      })      return    }    if (this.data.imageList.length) {      this.setData({        show: true      })      let imgs = this.data.imageList      await this.uploadimgs(imgs)      // console.log('异步执行完成')    }    // console.log('最后打印', this.data.imageLists)    let needdatas    const needArr = this.data.imageLists.map(item => {      return (item = item.replace(wx.env.FILE_URL, ''))    })    if (e.detail.value.input == '') {      needdatas = {        problem: e.detail.value.input1,        image: needArr.join(',')      }    } else {      if (!/^1[3456789]\d{9}$/.test(e.detail.value.input)) {        wx.showToast({          title: '请填写正确的手机号',          icon: 'none',          duration: 2000        })        this.setData({          disabledBtn: false        })        return      }      needdatas = {        problem: e.detail.value.input1,        image: needArr.join(','),        phone: e.detail.value.input      }    }    const datas = needdatas    insertReportProblem(datas)      .then(res => {        if (res.code == 0) {          this.setData({            form_input1: '',            form_input: '',            wordnum: 0,            imageList: [],            imageList: []          })          wx.showToast({            title: '提交成功',            icon: 'success',            duration: 1500          })          const timer = setTimeout(() => {            clearTimeout(timer)            wx.navigateBack({              delta: 1            })          }, 1000)        }      })      .catch(err => {        this.setData({          disabledBtn: false        })      })  },  uploadimgs(imgs) {    const imglist = []    const that = this    return new Promise((reslove, reject) => {      let i = 0      upimg()      function upimg() {        wx.uploadFile({          url: wx.env.API_URL + '/common/api/upload/image',          filePath: imgs[i],          name: 'file',          header: {            'Content-Type': 'multipart/form-data',            accept: 'application/json'          },          formData: {            file_source: 'miniProgram'          },          success: function (res) {            const datas = JSON.parse(res.data)            imglist.push(datas.data.img_url)            console.log(imglist)            that.setData({              // imageLists: that.data.imageLists.concat(imglist),              imageLists: imglist,              show: false            })            i++            if (i >= imgs.length) {              reslove()              return            }            upimg()          },          fail: function (res) {}        })      }    })  },