ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

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

2026/9/13 10:23:33 拓冰建站 浏览量
uniapp uview1.0 页面多个upload上传、回显之后处理数据

<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为自己 定义的reflet 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=>{//在这里判断出是否为回显上去的图片,我拿出来的是图片idif(item.file_id){ids.push(item.file_id)}else{ids.push(item.response.data.file_id)}})//赋值给自己的数据this.skuQuery[refText]=ids.join(',')},

关于另外一个upload循环问题在这icon-default.png?t=N7T8https://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方法的意思是数组所有元素都符合条件才返回truelet 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)returnlet valList=val.split(',')valList.map((value,index) => {// 首先检查内部是否已经添加过这张图片,因为外部绑定了一个对象给fileList的话(对象引用),进行修改外部fileList// 时,会触发watch,导致重新把原来的图片再次添加到this.lists// 数组的some方法意思是,只要数组元素有任意一个元素条件符合,就返回true,而另一个数组的every方法的意思是数组所有元素都符合条件才返回truelet 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});});}}},