Upload 组件一次请求上传多张图片,并携带参数

注:使用的uview 的upload 组件,其他框架upload 类似。

	<u-upload
		:max-count="10" //最大选择图片的数量
		multiple //是否可以多选
		:auto-upload="false" //关闭自动上传
		ref="uUpload"
		:action="'#'" //因为<upload>的action属性是必须的,所以如果不用默认上传,这里随便设置一个字符串就可以了。
		@on-list-change="uploadChange"//当内部文件列表被加入文件、移除文件,或手动调用clear方法时触发
	></u-upload>
<u-button type="primary" @click="submit" style="background-color:#2672cb;">确认提交</u-button>
data() {
		return {
			fileList: [],
			fd:{}
		};
	},
// 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
   uploadChange(lists, name) {
			this.fileList = lists;
	},
	submit() {		
		//一次请求上传多张图片,可以把数据存在FormData 里面		
		const fd=new FormData();
		// 上传图片同时要附带的参数
		fd.append('tid', this.tid);
		fd.append('uid',  this.use.id);
		fd.append('type', this.typeList[0].id);
		fd.append('bid',this.typeList[1].id);
		fd.append('sid', this.typeList[2].id);
		fd.append('lon', this.lon);
		fd.append('lat', this.lat);
		fd.append('address',  this.form.intro);
		fd.append('memo',  this.form.textDescribe);
		fd.append('createuserid',  this.use.createuserid);
		
		//上传的文件进行循环
		this.fileList.forEach( (file) => {// 因为要上传多个文件,所以需要遍历
			       this.fd.append('files', file.file)
		})

			axios.post(this.action, this.fd).then((res)=> {
				uni.showToast({
					title:res.data.message,icon:'none'
				})
				if(res.data.responseCode===0){
					this.form={};
					this.typeList= [{ name: '请选择' }];
					this.numList= [{ name: '请选择' }];
					this.fileList= [];
					this.$refs.uUpload.clear();
				}
			 })
		},
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sea9528

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值