uniapp uview1.0 页面多个upload上传、回显之后处理数据_uview1.0上传功能回显

<view class="img-title w-s-color-3 f-28 row">商品图片</view>
 
<u-upload ref="images" :header="header"  :file-list="fileListImages" :action="action" name="iFile" icon-name="camera"
	upload-text="上传图片"></u-upload>
 
<view class="img-title w-s-color-3 f-28 row">商品详情图片</view>
 
<u-upload ref="content" :header="header" :file-list="fileListCotent" :action="action" name="iFile" icon-name="camera" upload-text="上传图片"></u-upload>

html结构如上，定义两种ref  'images'  ,'content' 

在提交的时候将两种ref形成数组进行循环

subClick(){
  ['images','content'].map(item=>{
					this.getImg(item)
	})
}

处理数据

getImg(refText) {
                 //refText为自己 定义的ref
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs[refText].lists.filter(val => {
					return val.progress == 100;
				})
				if(refText=='images' && files.length==0){
					this.$refs.uToast.show({
						title: '请上传商品图片',
						type: 'error'
					})
					return
				}
				
				if(refText=='content' && files.length==0){
					this.$refs.uToast.show({
						title: '请上传商品详情图片',
						type: 'error'
					})
					return
				}
				let ids=[]
				files.map(item=>{
                  //在这里判断出是否为回显上去的图片，我拿出来的是图片id
					if(item.file_id){
						ids.push(item.file_id)
					}else{
						ids.push(item.response.data.file_id)
					}
				})
              //赋值给自己的数据
				this.skuQuery[refText]=ids.join(',')
			},

关于另外一个upload循环问题在这https://blog.csdn.net/weixin_47517731/article/details/130184680?spm=1001.2014.3001.5501

补充一点 

如果你们后端返回图片是地址字符串模式 以逗号分隔，并且后端接受的图片也是地址模式

比如：images:"xxxxxxxxxxxxxxxxx,xxxxxxxxxxxxxxxxxx,xxxxxxxxxxxxxx"

可在u-upload源码中做如下修改

直接找到watch 监听的fileList属性，直接复制过去就好

fileList: {
			immediate: true,
			handler(val) {
				if(typeof val=='object' && val){
					val.map(value => {
						// 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList
						// 时，会触发watch，导致重新把原来的图片再次添加到this.lists
						// 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
						let tmp = this.lists.some(val => {
							return val.url == value.url;
						})
						// 如果内部没有这个图片(tmp为false)，则添加到内部
						// 如果市外部传进来的给它一个特殊的标志，并将图片id保存下来
						!tmp && this.lists.push({ url: value.url, error: false, progress: 100 ,file_id:value.file_id,external:true});
					});
				}else if(typeof val=='string'){
					if(!val)return
					let valList=val.split(',')
					valList.map((value,index) => {
						// 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList
						// 时，会触发watch，导致重新把原来的图片再次添加到this.lists
						// 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
						let tmp = this.lists.some(val => {
							return val.url == value;
						})
						// 如果内部没有这个图片(tmp为false)，则添加到内部
						// 如果市外部传进来的给它一个特殊的标志，并将图片id保存下来
						!tmp && this.lists.push({ url: value, error: false, progress: 100 ,file_id:index+=1,external:true});
					});
				}
			}
		},

ps:最简单的一种 （上面的太复杂了，uview已经提供了相关的操作）

将数组循环的下标当作upload的索引，同时使用自带的方法

<u-upload :action="action"  icon-name="camera" max-count="6" :index="index" @on-success="successImg" @on-remove="removeImg"></u-upload>

后端返回的数据

 简单处理就直接将地址放进去了

successImg(data, index, lists, name){
				console.log(data)
				this.list[name].annex.push(data.url)
			},
			removeImg(index,list,name){
				this.list[name].annex.splice(index,1)
			},

 使用该方法存在一定的错误将数组循环的下标当作upload的索引，同时使用自带的方法

 如果需要回显图片数据，使用数组中的annex图片数组进行回显，则会存在错误

由于即用annex数组进行回显又将最新的图片push到annex数组中，导致错误的新上传图片出现两次的情况

所以如果存在回显的情况

那么一定要在从后端拿到数据后进行数据的处理

以我下面的为例，重新深度克隆了一个回显数组出来，避免上述中的问题

<u-upload :action="action" :file-list="item.annexList" icon-name="camera" max-count="6" :index="index" @on-success="successImg" @on-remove="removeImg"></u-upload>

​​​​​​​

res.data.forEach(item=>{
						item.annexList=this.$u.deepClone(item.annex)
					})