如何使用Axios在请求体中向API发送文件列表及带键文件映射？

假设前端有文件选择器 <input type="file" />（若支持多选需添加multiple属性），使用Axios发送单个文件的代码如下：

axios.post(url, file_data, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

需要解决两个场景的文件上传问题：

1. 发送文件列表而非单个文件；
2. 发送带自定义键的文件映射（如{"file_1": file_data_1, "file_2": file_data_2}）。

核心是利用FormData对象处理文件上传，Axios会自动适配multipart/form-data请求头，无需手动设置（手动设置会丢失边界标识导致后端解析失败）。

1. 发送文件列表 #

步骤如下：

• 给文件选择器添加multiple属性，允许选择多个文件；
• 获取选择的FileList对象；
• 创建FormData实例，将所有文件以同一个键名（如files）添加进去；
• 用Axios发送请求。

代码示例：

<input type="file" multiple id="multiFileInput" />

const fileInput = document.getElementById('multiFileInput');
const files = fileInput.files;
const formData = new FormData();

// 遍历文件列表，统一用"files"键添加
for (const file of files) {
  formData.append('files', file);
}

axios.post('/api/upload-files', formData)
  .then(res => console.log('上传成功', res))
  .catch(err => console.error('上传失败', err));

后端可通过files键获取文件数组。

2. 发送带自定义键的文件映射 #

如果需要为每个文件指定独立的标识键，直接在FormData中用对应键名添加文件即可：

场景1：按序号生成键名（如file_1、file_2） #

const fileInput = document.getElementById('multiFileInput');
const files = fileInput.files;
const formData = new FormData();

for (let i = 0; i < files.length; i++) {
  const key = `file_${i + 1}`;
  formData.append(key, files[i]);
}

axios.post('/api/upload-keyed-files', formData)
  .then(res => console.log('上传成功', res))
  .catch(err => console.error('上传失败', err));

场景2：使用预先定义的键值映射 #

// 假设已拿到文件列表，且有预设的键名映射
const fileMap = {
  'user_avatar': fileList[0],
  'id_card_front': fileList[1],
  'id_card_back': fileList[2]
};

const formData = new FormData();
Object.entries(fileMap).forEach(([key, file]) => {
  formData.append(key, file);
});

axios.post('/api/upload-custom-key-files', formData)
  .then(res => console.log('上传成功', res))
  .catch(err => console.error('上传失败', err));

关键提示 #

• 禁止手动设置Content-Type: multipart/form-data，Axios会自动生成包含边界信息的请求头，这是后端正确解析文件的必要条件；
• 后端需对应配置接收逻辑，根据你设置的键名（如file_1、user_avatar）获取对应文件。

内容的提问来源于stack exchange，提问作者Rongeegee