微信小程序配置上传多个u-upload上传
使用的是uView框架 微信小程序配置上传多个u-upload上传图片
场景需求：根据PC端配置项追加图片配置 小程序根据配置的图片数量，图片名称，进行上传图片
难度在于 我们不知道用户会追加多少个图片配置字
分析
这里我们肯定是循环多个 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.data this.attachment.forEach((item,index)=>{ this.newImgs[`imgs${index}`] = [] // 这里我们需要记录有多少个图片配置 }) },
- 属性
- 首先分析用户点击时先进行获取到 点击的是哪个配置字段的信息再进行赋值信息
- 通过 @on-choose-complete 先拿到点击的数据 进行记录
async uAttacUpload(name,index,required) { 这里都是记录数据用的 this.imgName = index this.recordName = name this.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上传感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…
