前言:上一篇写的是小程序异步上传,然后这篇主要是对图片上传的在优化,提升用户体验
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) {} }) } }) },