vue3 elementui 上传文件el-upload 的action 怎么动态设置成项目的域名
时间: 2024-03-06 08:47:20 浏览: 232
可以通过在`before-upload`事件中动态设置`action`属性来实现将`el-upload`组件的上传地址设置为项目的域名。具体步骤如下:
1. 在`<el-upload>`标签中设置`action`属性,但是这里的`action`值可以设置为一个变量,如`<el-upload :action="uploadUrl">`。
2. 在Vue组件中定义`uploadUrl`变量,并将其初始值设置为`''`。
3. 在`before-upload`事件中获取当前域名地址,并将其设置为`uploadUrl`变量的值。
完整代码示例:
```vue
<template>
<el-upload :action="uploadUrl" @before-upload="beforeUpload">
<el-button>上传文件</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
uploadUrl: '', // 初始化上传地址为空字符串
}
},
methods: {
beforeUpload(file) {
// 获取当前域名地址
const domain = window.location.protocol + '//' + window.location.host;
// 设置上传地址为当前域名下的/upload路径
this.uploadUrl = domain + '/upload';
// 返回 true,表示继续上传文件
return true;
}
}
}
</script>
```
在上面的代码中,我们在`before-upload`事件中获取当前域名地址,并将`uploadUrl`变量的值设置为当前域名下的`/upload`路径,即可动态设置`<el-upload>`组件的上传地址为当前项目的域名。
阅读全文