使用RTK Query发送表单数据

Question

我想使用RTK查询将带有表单数据的图像发送到Nest JS服务器，但文件未发送。代码如下：

    uploadImage: builder.mutation<any, any>({
  query: (imageFile) => {
    var bodyFormData = new FormData();
    bodyFormData.append('file', imageFile);
    console.log({ bodyFormData, imageFile });
    return {
      url: '/uploader/image',
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data;'
      },
      body: { bodyFormData }
    };
  }
})

我可以用Axios发送图片，但在 RTK 中却不能。

- Mehrad Farahnak

Answer 1

在进行 API 请求时，除了传递表单数据，你还应该传递另一个名为 formData 的参数，这也适用于 RTK Query。

  uploadImage: builder.mutation<any, any>({
  query: (imageFile) => {
    var bodyFormData = new FormData();
    bodyFormData.append('file', imageFile);
    console.log({ bodyFormData, imageFile });
    return {
      url: '/uploader/image',
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data;'
      },
      body: { bodyFormData },
      formData:true           //add this line 
    };
  }
})

- Bharat Adhikari

---

仍然出现错误：“无法读取未定义的属性（读取'filename'）” - Mehrad Farahnak

Content-Type应该从headers中省略，因为如果formData为true，它会自动添加正确的边界。 - undefined

Answer 2

在我的情况下，除了formData: true之外，还添加"Accept", "application/json"解决了这个问题。

- enkoPavle

Answer 3

删除 body: { bodyFormData }，改用 body: bodyFormData。

此外，你可以尝试使用以下结构：

var bodyFormData = new FormData();
    bodyFormData.append('file', {
      uri: imageFileUri, 
      type: "image/jpeg",
      name: imageFileUri?.split('/')[imageFileUri?.split('/').length - 1]
    });

- Brogrammer