微信小程序配置上传多个u-upload上传-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序配置上传多个u-upload上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

分析

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

<u-upload ></u-upload>

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

实现

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.data
				this.attachment.forEach((item,index)=>{
					this.newImgs[`imgs${index}`] = [] // 这里我们需要记录有多少个图片配置
				})
	},

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

属性
首先分析用户点击时先进行获取到点击的是哪个配置字段的信息再进行赋值信息
通过 @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上传,微信小程序,notepad++,小程序
以上就是微信小程序配置上传多个u-upload上传感谢大家的阅读
如碰到其他的问题可以私下我一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客作者会持续更新…文章来源地址https://www.toymoban.com/news/detail-621020.html