如何用Axios在同一请求中同时上传3个文件与JSON数据？

我尝试通过API同时上传3个文件和JSON数据，但始终没能成功。目前用Redux Toolkit的createAsyncThunk结合Axios编写了代码，先后尝试以Blob形式和直接提交JSON的方式都失败了。以下是我的实现代码及Swagger提供的curl示例，寻求正确的实现方法：

我的实现代码 #

export const postfunc = createAsyncThunk(
  "dashbaord/postfunc ",
  async (filesSelected, ThunkAPI) => {
    const state = ThunkAPI.getState();
    const formData = new FormData();
    const blob = new Blob([JSON.stringify(state.dashbaord.myjson)], {
      type: "application/json",
    });
    formData.append("json", blob);
    formData.append("File1", filesSelected[0]);
    formData.append("File2", filesSelected[1]);
    formData.append("File3", filesSelected[2]);
    const response = await axios.post(
      "http://localhost:8000/start/",
      formData
    );
    console.log(response.data);
    return response.statusText;
  }
);

Swagger提供的curl示例 #

curl -X 'POST' \
  'http://localhost:8000/start/?json=XX_JSON-DATA_XX' \
  -H 'accept: application/json' \
  -H 'Content-Type: multipart/form-data' \
  -F 'file1=@d.png' \
  -F 'file2=@sp.png' \
  -F 'file3=@lookup.zip;type=application/x-zip-compressed'

正确实现方法 #

对比你的代码和curl示例，存在两个核心问题：

1. JSON数据的传递方式错误：curl示例中JSON是作为URL查询参数传递的，而你把它放到了FormData里；
2. 文件字段名不匹配：curl里的字段名是file1/file2/file3（全小写），而你用了File1/File2/File3（首字母大写），接口会识别不到文件。

修改后的代码如下：

export const postfunc = createAsyncThunk(
  "dashboard/postfunc",
  async (filesSelected, ThunkAPI) => {
    const state = ThunkAPI.getState();
    const jsonData = state.dashboard.myjson;
    const formData = new FormData();
    
    // 字段名严格匹配curl示例的小写格式
    formData.append("file1", filesSelected[0]);
    formData.append("file2", filesSelected[1]);
    formData.append("file3", filesSelected[2]);

    // 将JSON转为字符串，作为URL查询参数传递
    const params = new URLSearchParams();
    params.append("json", JSON.stringify(jsonData));

    const response = await axios.post(
      "http://localhost:8000/start/",
      formData,
      {
        params: params,
        headers: {
          "accept": "application/json"
        }
      }
    );

    console.log(response.data);
    return response.statusText;
  }
);

关键说明 #

• 无需将JSON转为Blob，直接序列化为字符串后作为查询参数即可；
• Axios会自动处理multipart/form-data类型的请求头（包括生成正确的boundary），不要手动设置Content-Type: multipart/form-data，否则可能导致请求失败；
• 确保所有字段名和接口要求完全一致，包括大小写。

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