Element Plus上传组件使用http-request时如何自定义请求头？

Question

在使用 Element Plus 的上传组件时，如何通过 `http-request` 方法自定义请求头（如添加 Token、Content-Type 等）？

Answer 1

一、Element Plus 上传组件简介与基本使用

Element Plus 是基于 Vue 3 的现代 UI 框架，提供了丰富的组件库，其中上传组件 el-upload 是处理文件上传的核心组件。默认情况下，它使用浏览器的原生 XMLHttpRequest 发送请求。但在实际开发中，我们往往需要自定义上传请求，例如添加 Token、设置 Content-Type 等。

二、http-request 方法的作用与使用场景

http-request 是 el-upload 提供的一个自定义上传方法的属性。当设置该属性后，组件将不再使用默认的上传行为，而是调用我们提供的函数进行上传。

常见使用场景包括：

• 添加请求头（如 Token、Authorization）
• 设置特定的 Content-Type
• 对接自定义上传接口
• 上传前进行文件校验或预处理

三、通过 http-request 自定义请求头的实现步骤

以下是一个典型的使用 http-request 方法添加请求头的示例：

import axios from 'axios';

export default {
  methods: {
    customUploadRequest(options) {
      const { action, file, onProgress, onSuccess, onError } = options;

      const formData = new FormData();
      formData.append('file', file);

      axios.post(action, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        onUploadProgress: (progressEvent) => {
          const percent = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          onProgress({ percent });
        }
      }).then(response => {
        onSuccess(response.data);
      }).catch(error => {
        onError({ err: error });
      });
    }
  }
}
  

在模板中使用方式：

  点击上传

  

四、深入分析：请求头设置的注意事项与最佳实践

在设置请求头时需要注意以下几点：

1. Content-Type 的设置：在使用 FormData 上传文件时，应设置为 multipart/form-data，但浏览器会自动处理此类型，因此在使用 axios 或 fetch 时无需手动设置。
2. Token 的获取与刷新机制：Token 通常存储在 localStorage 或 vuex 中，需确保在上传时 Token 有效，必要时集成刷新 Token 的逻辑。
3. 错误处理与重试机制：上传失败时应调用 onError 并记录日志，可考虑集成重试逻辑。
4. 跨域请求的处理：如果上传地址为跨域地址，需后端配置 CORS 并允许相关请求头。

五、扩展：结合 Axios、Fetch、自定义封装的上传逻辑

除了使用 axios，你也可以使用原生 fetch 或封装自己的上传服务，以下是一个使用 fetch 的示例：

customUploadRequest(options) {
  const { action, file, onProgress, onSuccess, onError } = options;

  const formData = new FormData();
  formData.append('file', file);

  fetch(action, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    },
    body: formData,
    onprogress: (e) => {
      if (e.lengthComputable) {
        const percent = Math.round((e.loaded * 100) / e.total);
        onProgress({ percent });
      }
    }
  }).then(response => {
    if (!response.ok) throw new Error('Upload failed');
    return response.json();
  }).then(data => {
    onSuccess(data);
  }).catch(err => {
    onError({ err });
  });
}
  

六、流程图：上传请求的完整流程

graph TD
A[用户选择文件] --> B[触发上传]
B --> C{是否设置 http-request?}
C -->|是| D[调用自定义方法]
C -->|否| E[使用默认上传]
D --> F[构造请求头]
F --> G[添加 Token、Content-Type]
G --> H[发送请求]
H --> I{上传成功?}
I -->|是| J[调用 onSuccess]
I -->|否| K[调用 onError]