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

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
},