二次封装axios 怎么添加上传文件

二次封装 axios 通常是为了简化 API 调用过程、统一数据结构、增加错误处理机制以及增强安全性等。在封装过程中，我们可能会遇到需要通过 HTTP POST 请求上传文件的情况。以下是使用 Axios 进行文件上传的基本步骤：

### 步骤 1: 创建 axios 配置实例

首先，创建一个 axios 的实例，并配置好超时时间、请求头等。

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'http://your-api-url.com', // 指定API服务器地址
  timeout: 5000, // 设置请求超时时间
});

### 步骤 2: 添加上传文件功能

在封装的 axios 函数中，你可以将文件作为请求的数据的一部分来发送。这通常是通过 `data` 属性来完成的，并设置其 `Content-Type` 为 `multipart/form-data` 来告知服务器这是一个文件上传操作。

function uploadFile(file, params) {
  const formData = new FormData();
  formData.append('file', file);
  for (let key in params) {
    formData.append(key, params[key]);
  }

  return axiosInstance.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  });
}

### 步骤 3: 使用封装后的函数

现在你可以像使用普通的 axios 请求一样调用这个新的函数，只需要传入你要上传的文件和对应的参数即可。

const uploadedFile = document.getElementById('my-file-input').files;
const requestParams = { /* your parameters */ };
uploadFile(uploadedFile, requestParams)
  .then(response => {
    console.log('Success:', response.data);
  })
  .catch(error => {
    console.error('Error:', error.response ? error.response.data : error.message);
  });

### 相关问题:

1. **为什么需要二次封装 axios？**
- 提高代码复用性，减少不必要的重复代码。
- 统一了 API 调用的方式和风格，便于团队成员理解和维护。
- 易于添加额外的功能如日志记录、中间件、异常处理等。

2. **二次封装 axios 时需要注意哪些事项？**
- **安全**: 确保敏感信息不会泄露，例如在日志中不包含用户凭据。
- **性能优化**: 对请求进行适当缓存或异步加载以提升用户体验。
- **兼容性**: 确保封装的函数在各种浏览器和环境中都能正常工作。

3. **如何调试二次封装的 axios 函数？**
- 使用 `console.log()` 或专门的调试工具查看请求和响应的具体内容。
- 开发环境可以开启 CORS（Cross-Origin Resource Sharing），以便于前端和后端调试通信问题。
- 使用断言（assertions）检查返回值是否符合预期。