如何使用Redux Toolkit中的RTK查询发送文件

Question

我正在尝试使用RTK查询突变将文件上载到API。这是我的突变代码：

addBanner: builder.mutation({
query(body) {
return {
url: `/api/banners`,
method: 'POST',
body,
}
},
})

以下是我为请求生成数据的方式。

const [addBanner, { isBannerLoading }] = useAddBannerMutation();

const new_banner = new FormData();    
new_banner.append("file", my_file);
new_banner.append("type", my_type);
new_banner.append("title", my_title);
addBanner(new_banner).unwrap().then( () => ... 

但我得到了一个错误：

A non-serializable value was detected in the state, in the path: `api.mutations.L-Mje7bYDfyNCC4NcxFD3.originalArgs.file`...

我知道我可以完全通过中间件禁用不可串行化的检查，但我认为这不是使用Redux Toolkit和RTK的合适方式。没有文件一切都很好。是否有任何正确的方式使用RTK上传文件？

Answer 1

编辑：此问题已通过@reduxjs/toolkit 1.6.1修复-请更新您的包

---

我刚刚为此打开了一个问题：https://github.com/reduxjs/redux-toolkit/issues/1239-谢谢你提出来！

目前，您可能必须禁用该检查(您可以对状态中的某个路径禁用该检查，同时使用ignoredPath选项保留其余路径(。

Answer 2

在查询中传递formData。

像这样：

addBanner: builder.mutation({
query(body) {
return {
url: `/api/banners`,
method: 'POST',
body,
formData: true,
}
},
})