使用RTK Query向NestJS服务器发送图片FormData失败求助

你的RTK Query代码存在两个关键问题，导致文件无法成功上传：

1. 请求体格式错误
   你将FormData实例包裹在了对象{ bodyFormData }中，这会让请求体变成包含bodyFormData字段的JSON结构，而非直接传递FormData本身，服务器无法从中解析出文件。

2. 手动设置Content-Type导致解析失败
   发送FormData时，浏览器会自动生成包含boundary标识的Content-Type头（例如multipart/form-data; boundary=----WebKitFormBoundaryxxx），手动指定'Content-Type': 'multipart/form-data;'会丢失关键的boundary信息，服务器无法正确分割表单数据。

修正后的代码 #

uploadImage: builder.mutation<any, any>({
  query: (imageFile) => {
    const bodyFormData = new FormData();
    bodyFormData.append('file', imageFile);
    console.log({ bodyFormData, imageFile });
    return {
      url: '/uploader/image',
      method: 'POST',
      // 移除手动设置的Content-Type，由浏览器自动生成正确的请求头
      body: bodyFormData // 直接传入FormData实例，不要包裹在对象里
    };
  }
})

补充说明 #

RTK Query底层基于Fetch API（或自定义配置的Axios），只要请求体格式正确，和直接用Axios发送FormData的逻辑一致。修正后服务器就能正常接收你上传的文件了。

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