如何通过Redux Toolkit发送RTK查询文件?

mm9b1k5b  于 2023-04-30  发布在  其他
关注(0)|答案(2)|浏览(139)

我正在尝试使用RTK Query mutations将文件上传到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上传文件有什么正确的方法吗?

pkbketx9

pkbketx91#

编辑:这已经通过@reduxjs/toolkit 1修复。6.1 -请更新您的软件包
我刚刚为此开了一个问题:https://github.com/reduxjs/redux-toolkit/issues/1239-谢谢你的支持!
现在,您可能不得不禁用该检查(您可以对状态中的某个路径执行此操作,同时使用ignoredPath选项保留其余路径)。

yshpjwxd

yshpjwxd2#

在查询中传递formData
就像这样:

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

相关问题