vue 项目 使用el-upload组件上传文件的接口,前缀使用公共的
时间: 2024-04-02 10:33:46 浏览: 21
如果你想使用Element UI的`el-upload`组件上传文件,你可以在Vue.js项目的公共配置文件中设置`baseURL`,并将其作为`action`属性传递给`el-upload`组件。
以下是一个示例:
```vue
<template>
<el-upload
class="upload-demo"
:action="uploadUrl"
:on-success="handleSuccess"
:file-list="fileList"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
fileList: [],
uploadUrl: '/upload'
};
},
methods: {
beforeUpload(file) {
// Some validations
},
handleSuccess(response) {
console.log(response.data);
}
},
mounted() {
axios.defaults.baseURL = 'https://example.com/api';
this.uploadUrl = axios.defaults.baseURL + this.uploadUrl;
}
};
</script>
```
在上面的示例中,我们在Vue.js项目的公共配置文件中设置了axios的`baseURL`为`https://example.com/api`。在组件的`mounted`生命周期中,我们将`uploadUrl`属性设置为`/upload`的完整URL,以便在`el-upload`组件中使用。同时,我们还声明了一些方法来处理文件上传前的验证和上传成功后的响应。