当前位置：首页 > news >正文

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

news 2025/7/27 21:49:10

微信小程序配置上传多个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>

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

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) // 找到删除掉}})},