如何使用Redux Toolkit中的RTK Query发送文件？

Question

我将尝试使用RTK Query mutations来上传文件到API。这是我的mutation代码：

    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上传文件的正确方法？

- Yevgeniy Timchenko

Answer 1

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

---

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

目前，您可能需要禁用该检查（您可以在状态中针对某个路径这样做，同时保留其余部分的检查，使用ignoredPath选项）。

- phry

---

非常感谢您的回答！我现在会使用ignoredPath，但希望在我们投入生产之前能找到解决方案。 - Yevgeniy Timchenko

这个问题已经在@reduxjs/toolkit 1.6.1中得到修复 - 请更新您的软件包。 - phry

Answer 2

将formData作为查询参数传递。

像这样：

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

- Hadi