【uView】循环使用u-upload上传组件实例

最新推荐文章于 2023-12-30 20:12:38 发布

一介青烟小生

最新推荐文章于 2023-12-30 20:12:38 发布

阅读量1k

点赞数

分类专栏： uniapp 文章标签： uni-app uview

本文链接：https://blog.youkuaiyun.com/lu6545311/article/details/133339602

版权

uniapp 专栏收录该内容

3 篇文章

订阅专栏

博客介绍了uni-app中循环使用上传组件实例的方法，可通过文档中回调方法的返回值确定上传组件在数组中的下标，将上传成功参数赋值到对应数组参数。同时提到微信小程序上传需手动修改和添加头部信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uview，循环使用u-upload上传组件实例

<view v-for="(item,index) in list" :key="index">
	<u-upload ref="uUpload" :action="fileBase.action" :show-tips="false"
				  		:max-count='3' :show-upload-list="true" @on-success="handSuccessclose"
				  		@on-remove="handRemoveclose" :header="headerData"
				  		width="160" height="160" :index="index">
	</u-upload>
</view>

1、在文档上面可以看到成功失败删除的回调方法都会有一个name返回
在这里插入图片描述

2、这个name的返回值是来自index的传递参数的，所以我们可以通过这个参数来确定当前的上传组件所在的数组的下标值是多少，这样就可以把上传成功返回的参数赋值到对应的数组参数里面去

在这里插入图片描述

handRemoveclose(index, lists, name){
		let list = this.List[name].fileList
        //可以在这里调用自带的删除文件的方法，先拿到对应的参数再删除。然后再处理list的内容
		list.splice(index, 1);
		this.List[name].fileListR = lists
    
},
handSuccessclose(data, index, lists, name){
		this.List[name].fileListR.push(data.data)
},

3、headerData，头部信息

因为微信小程序的上传也是需要修改头部信息的和添加cookie的，所以需要手动把头部信息给修改了

onShow() {
	// #ifdef MP-WEIXIN
		this.headerData = {
			'content-type':'multipart/form-data',
			'cookie':wx.getStorageSync("cookie")
		}
	// #endif
},