ant design vue2 上传文件 多传一个动态参数
时间: 2023-10-22 12:09:47 浏览: 96
vue+element_ui上传文件,并传递额外参数操作
可以通过在上传组件的 `beforeUpload` 方法中,向上传接口添加额外的参数。
例如,在 `beforeUpload` 方法中,可以获取当前上传文件的相关信息,然后在上传接口中添加一个额外的参数 `extraParam`,并将其值设置为当前上传文件的名称。
示例代码如下:
```html
<template>
<a-upload
:before-upload="handleBeforeUpload"
:action="uploadUrl"
:headers="headers"
:data="formData"
>
<a-button>
<a-icon type="upload" /> 点击上传
</a-button>
</a-upload>
</template>
<script>
export default {
data() {
return {
uploadUrl: '/api/upload',
headers: {
Authorization: 'Bearer token',
},
formData: {
extraParam: '', // 额外参数的初始值为空
},
};
},
methods: {
handleBeforeUpload(file) {
// 获取当前上传文件的名称
const fileName = file.name;
// 将额外参数设置为当前上传文件的名称
this.formData.extraParam = fileName;
// 返回 true,表示继续上传
return true;
},
},
};
</script>
```
在上传接口中,可以通过 `extraParam` 参数获取到额外的参数值。
注意:如果上传接口是跨域的,需要在服务器端设置允许跨域请求并接收额外参数。
阅读全文