ElementUI的Upload组件上传时如何携带参数

Upload组件上传时如何携带参数

今天在写文件上传时,想要在上传的时候携带参数.
由于对前端代码不太熟悉,也踩了很多坑,在此写出自己的见解,如果有什么不对的地方,希望大家及时指出.

起初的想法是直接在action后面加上需要传递的参数,如下

<el-upload
	class="avatar-uploader"
	<!--直接在url后面写参数-->     
	action="/setmeal/updatePicture.do?pictureName"+this.imageName
	:auto-upload="autoUpload"
	name="imgFile"
	:show-file-list="false"
	:on-success="handleAvatarSuccess"
	:before-upload="beforeAvatarUpload">
</el-upload>

试过之后在发现根本行不通,后来去网上查了很多资料,经过多番尝试之后终于成功
原来可以直接使用 :data={参数} ,参数为键值对的形式{key1:value1,key2:value2},传递参数,如下

<el-upload
	class="avatar-uploader"
	action="/setmeal/updatePicture.do"
	:data={pictureName:this.imageName}
	:auto-upload="autoUpload"
	name="imgFile"
	:show-file-list="false"
	:on-success="handleAvatarSuccess"
	:before-upload="beforeAvatarUpload">
</el-upload>

这样就可以在上传文件,访问后端时携带参数
在这里插入图片描述

  • 12
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
要实现Element UI的手动上传,需要使用Upload组件和对应的方法。以下是一个示例: 1. 在你的Vue组件中引入Upload组件: ```vue <template> <div> <el-upload class="upload-demo" action="/your-upload-url" :on-success="handleSuccess" :before-upload="beforeUpload" :auto-upload="false" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> <el-button type="primary" @click="upload">上传到服务器</el-button> </div> </template> <script> export default { methods: { handleSuccess(response, file, fileList) { // 处理上传成功的逻辑 console.log(response, file, fileList); }, beforeUpload(file) { // 验证文件格式、大小等 console.log(file); }, upload() { // 手动触发上传 this.$refs.upload.submit(); } } } </script> <style> .upload-demo { border: 1px dashed #409eff; border-radius: 6px; padding: 20px; text-align: center; color: #999; } </style> ``` 2. 在`<el-upload>`标签中,设置`action`属性为你的上传接口地址,`on-success`为上传成功的回调函数,`before-upload`为上传之前的验证函数,`auto-upload`设为`false`表示手动触发上传。 3. 在`<el-upload>`标签中,添加一个触发上传的按钮,这里使用了`<el-button>`。 4. 在`<el-upload>`标签内部的内容为用户选择文件后展示的内容,这里使用了一个提示信息。 5. 在Vue组件的`methods`中,编写了`handleSuccess`、`beforeUpload`和`upload`三个函数。 - `handleSuccess`函数是上传成功后的回调函数,可以在其中处理上传成功后的逻辑。参数`response`为服务器返回的数据,`file`为当前上传的文件对象,`fileList`为已上传的文件列表。 - `beforeUpload`函数用于在上传之前进行文件验证,例如验证文件格式、大小等。参数`file`为当前要上传的文件对象。 - `upload`函数用于手动触发上传,通过`this.$refs.upload.submit()`来提交上传请求。 注意:以上代码中使用了Element UI的样式类名和组件,确保你已经正确引入Element UI并设置了相应的样式。 希望对你有帮助!如果还有其他问题,请继续提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值