使用u

使用u

提示：使用u-upload上传图片，递归实现图片按顺序排序

文章目录

• 前言
• 一、效果图实现
• 二、使用步骤
• 总结

前言

使用u-upload上传图片，递归实现图片按顺序排序

一、效果图实现

二、使用步骤

代码如下（示例）：

<view class="initiate-info-upload"><u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" multiple name="1" width="226" height="226" :maxCount="9" :previewFullImage="true"><image src="../../static/images/index/tjzp@2x.png" mode="widthFix" style="width: 226rpx; height: 226rpx"></image></u-upload>
</view>data() {return {fileList1: [],imgList4: [],imgList2: '',imgLists: [],//用于判断所有图片是否均已上传完成uploadImgFinished: true,}},

// 删除图片deletePic(event) {this[`fileList${event.name}`].splice(event.index, 1)},afterRead(event) {let that = thisthat.uploadImgFinished = falselet lists = event.filelists.map((item) => {this[`fileList${event.name}`].push({...item,})})this.fileList1 = this.fileList1.slice(0, 9)this.imgLists = []console.log('待上传图片==', this.fileList1)this.upimages(this.fileList1, 0)},upimages(data, index) {let that = thisconsole.log('第几个图片', index)upyun.upload({localPath: data[index].url,remotePath: '/yyqc/{year}{mon}{day}/upload_{random32}{.suffix}', //上传文件保存路径success: function (res) {if (res.statusCode == 200) {console.log('上传成功数据==', JSON.parse(res.data))let imgList = JSON.parse(res.data).urlthat.imgList2 = '' + imgListthat.imgLists.push(that.imgList2)let num = index + 1if (num < data.length) {//使用递归上传已选择的图片that.upimages(data, num)} else {that.imgList4 = that.imgLists//用于判断所有图片是否均已上传完成that.uploadImgFinished = true}}},fail: function ({ errMsg }) {console.log('uploadImage fail, errMsg is', errMsg)},})},

总结

使用upyun直接上传图片，上传的顺序是无序的，平台并没有做图片顺序的限制，谁先上传完，谁就先显示。所以前端可以使用递归来实现图片上传。