微信小程序配置上傳多個u-upload上傳

使用的是uView框架 微信小程序配置上傳多個u-upload上傳圖片
場景需求：根據(jù)PC端配置項追加圖片配置 小程序根據(jù)配置的圖片數(shù)量，圖片名稱，進(jìn)行上傳圖片
難度在于 我們不知道用戶會追加多少個圖片配置字段

分析

這里我們肯定是循環(huán)多個 u-upload 那么我們需要知道上次的地方和位置

<u-upload ></u-upload>

實現(xiàn)

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 = [] // 初始化數(shù)組
				let data = await api() // 獲取后端配置信息
				this.attachment = data.data
				this.attachment.forEach((item,index)=>{
					this.newImgs[`imgs${index}`] = [] // 這里我們需要記錄有多少個圖片配置
				})
	},

• 屬性
  首先分析用戶點擊時先進(jìn)行獲取到 點擊的是哪個配置字段的信息再進(jìn)行賦值信息
  通過 @on-choose-complete 先拿到點擊的數(shù)據(jù) 進(jìn)行記錄

async uAttacUpload(name,index,required) {  這里都是記錄數(shù)據(jù)用的
				this.imgName = index
				this.recordName = name
				this.imgRequired = required
	}

ttacUpload(index,list){
				 this.newImgs[this.imgName] = list // 進(jìn)行賦值
			},

通過 @on-change 屬性進(jìn)行賦值

//  圖片配置
			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({// 這里我們講添加的圖片存儲到新的數(shù)組里面
				  	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)=>{ // 拿到所有的數(shù)據(jù)
					newArr =[...newArr,...this.newImgs[`imgs${index}`]] 
				})
				newUrl = newArr.map((item)=> {  // 拿到url存到新的數(shù)組里面
					return item.url
				})
				this.newAttachment.forEach((item,index)=>{
					if(!newUrl.includes(item.url)){
						this.newAttachment.splice(index,1) // 找到刪除掉
					}
				})
				
			},

以上就是微信小程序配置上傳多個u-upload上傳感謝大家的閱讀
如碰到其他的問題 可以私下我 一起探討學(xué)習(xí)
如果對你有所幫助還請 點贊 收藏謝謝~！
關(guān)注收藏博客 作者會持續(xù)更新…文章來源地址http://www.zghlxwxcb.cn/news/detail-621020.html

到了這里，關(guān)于微信小程序配置上傳多個u-upload上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！