微信小程序配置上传多个u-upload上传

微信小程序配置上传多个u-upload上传

使用的是uView框架 微信小程序配置上传多个u-upload上传图片
场景需求：根据PC端配置项追加图片配置 小程序根据配置的图片数量，图片名称，进行上传图片
难度在于 我们不知道用户会追加多少个图片配置字段

分析

这里我们肯定是循环多个 u-upload 那么我们需要知道上次的地方和位置

<u-upload ></u-upload>

实现

HTML

<view class="item" :label="item.name" v-for="(item,i) in attachment" :key="i":required='item.required'><u-upload :ref="'uAttac4'" action="false" :show-tips="false" :max-count="item.size":file-list="[]" @on-remove="removeuAttac"  @on-choose-complete="uAttacUpload(item.name,'imgs'+String(i),item.required)" @on-change="attacChange"></u-upload></view>

JS

• 首先从后端获取 配置追加图片的信息

async getApi() {this.attachment = [] // 初始化数组let data = await api() // 获取后端配置信息this.attachment = data.datathis.attachment.forEach((item,index)=>{this.newImgs[`imgs${index}`] = [] // 这里我们需要记录有多少个图片配置})},

• 属性
  首先分析用户点击时先进行获取到 点击的是哪个配置字段的信息再进行赋值信息
  通过 @on-choose-complete 先拿到点击的数据 进行记录

async uAttacUpload(name,index,required) {  这里都是记录数据用的this.imgName = indexthis.recordName = namethis.imgRequired = required}

ttacUpload(index,list){this.newImgs[this.imgName] = list // 进行赋值},

通过 @on-change 属性进行赋值

//  图片配置async attacChange(resa, index, lists,){const data = await Oss(lists[index]["url"]);if (data.code === 0) {this.newImgs[this.imgName][index].url = data.date.url // 将url地址改成 oss地址this.newAttachment.push({// 这里我们讲添加的图片存储到新的数组里面type: "image",name: this.recordName, // 做好记录url: data.date.url,}) } else {uni.showToast({title: "信息错误",icon: 'none'})}},

• 删除功能

removeuAttac(index){let newArr = []let newUrl = []this.attachment.forEach((item,index)=>{ // 拿到所有的数据newArr =[...newArr,...this.newImgs[`imgs${index}`]] })newUrl = newArr.map((item)=> {  // 拿到url存到新的数组里面return item.url})this.newAttachment.forEach((item,index)=>{if(!newUrl.includes(item.url)){this.newAttachment.splice(index,1) // 找到删除掉}})},

以上就是微信小程序配置上传多个u-upload上传感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…