微信小程序配置上传多个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.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) // 找到删除掉
					}
				})
				
			},

这篇好文章是转载于：学新通技术网