为什么el-upload的actions里发起的请求 不会被请求拦截器拦截
时间: 2023-11-06 09:10:48 浏览: 148
在使用 `el-upload` 组件时,上传文件的请求是由浏览器直接发送的,而不是由 Vue 实例中的 axios 实例发起的。因此,请求拦截器中设置的拦截规则无法对该请求进行拦截。
如果需要在上传文件时对请求进行拦截并添加一些自定义的请求头或参数,可以在组件的 `before-upload` 事件中将这些信息添加到上传请求的 `headers` 或 `data` 中。例如:
```html
<el-upload
:headers="{
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer ' + token
}"
:data="{
'param1': 'value1',
'param2': 'value2'
}"
:before-upload="beforeUpload"
>
<el-button type="primary">点击上传</el-button>
</el-upload>
```
在 `before-upload` 方法中可以对请求进行拦截,并在 `headers` 或 `data` 中添加自定义的信息:
```javascript
methods: {
beforeUpload(file) {
// 对请求进行拦截并添加自定义的请求头或参数
this.$axios.interceptors.request.use(config => {
config.headers['X-Custom-Header'] = 'value';
config.data.param3 = 'value3';
return config;
});
// 返回 false 可以阻止文件上传
return true;
}
}
```
需要注意的是,由于上传请求是由浏览器直接发送的,而不是由 Vue 实例中的 axios 实例发起的,因此在 `before-upload` 方法中修改 axios 实例的拦截器可能会影响到其他请求的拦截。为了避免这种情况,可以在 `before-upload` 方法中单独创建一个 axios 实例,并在该实例中设置自定义的拦截器。