如何通过FormData上传包含额外信息的多文件对象数组？

• FormData的append()方法仅支持传入字符串、Blob、File三类值作为第二个参数，你直接传入普通对象时，JS会自动调用toString()方法转换对象，最终存入FormData的是[object Object]字符串，完全丢失了文件和自定义属性的实际内容，这是请求异常的核心原因。
• 你手动设置了Content-Type: multipart/form-data请求头，但是缺少了必要的boundary分隔符参数，会导致后端无法正常拆分解析表单字段。axios会自动识别传入的FormData对象，自动生成带正确boundary的请求头，无需手动设置。

页面逻辑代码修改 #

import api from './api';

const formData = new FormData();
const files = this.$refs.photo.files;

if (files.length > 0) {
  for (let i = 0; i < files.length; i++) {
    // 按索引传递文件
    formData.append(`files[${i}][file]`, files[i]);
    // 按索引传递对应文件的关联属性
    formData.append(`files[${i}][someOtherProp]`, 'value');
  }
}
// 其他业务参数也可以直接append
formData.append('articleTitle', '示例文章');

api.createArticle(formData);

api封装代码修改 #

// api/index.js
import axios from 'axios';
import config from '@/config';

const api = axios.create({
  baseURL: config.api,
  timeout: config.apiTimeout,
});

function createArticle(payload) {
  // 删除手动设置的Content-Type，交由axios自动处理
  return api.post('/articles', payload);
}

export {
  createArticle
};

修改完成后可以通过如下代码打印FormData内容，确认传值是否正确：

for (let [key, value] of formData.entries()) {
  console.log(key, value);
}

你之前请求的异常截图如下：

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