如何使用Redux Toolkit Query实现图片上传？

你的问题出在直接将File对象作为请求体发送，imgBB的API要求通过multipart/form-data格式提交，且文件参数名必须为image。以下是修正后的完整实现：

1. 修正RTK Query的API定义 #

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const imgBB = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.imgbb.com/1/' }),
  endpoints: (builder) => ({
    upload: builder.mutation({
      query: (file) => {
        // 创建FormData并添加文件
        const formData = new FormData();
        formData.append('image', file);
        
        return {
          url: 'upload?key=MY_API_KEY', // 注意去掉开头斜杠，baseUrl已包含末尾的/
          method: 'POST',
          body: formData,
          // 无需手动设置Content-Type，浏览器会自动根据FormData生成正确的multipart/form-data头
        };
      },
    }),
  }),
});

export default imgBB;
export const { useUploadMutation } = imgBB;

2. 组件中正确调用上传方法 #

import { useUploadMutation } from './path-to-your-api-slice';

function YourComponent() {
  const [uploadFile, { isLoading, error, data }] = useUploadMutation();

  const fileChange = ({ target: { files } }) => {
    if (files.length === 0) return;
    const file = files[0];
    uploadFile(file)
      .unwrap()
      .then((response) => {
        console.log('上传成功:', response);
        // 处理返回的图片链接等数据
      })
      .catch((err) => {
        console.error('上传失败:', err);
      });
  };

  return (
    <div>
      <input type="file" onChange={fileChange} accept="image/*" />
      {isLoading && <p>上传中...</p>}
      {error && <p>上传失败: {error.data?.error?.message}</p>}
      {data && <p>上传成功！图片链接: {data.data?.url}</p>}
    </div>
  );
}

export default YourComponent;

关键注意点 #

• 必须使用FormData包装文件，这是multipart/form-data类型请求的标准方式。
• 文件参数名必须是image，这是imgBB API明确要求的字段名。
• 调用uploadFile后，推荐使用.unwrap()直接获取响应数据或捕获错误，简化状态处理。
• 生产环境建议通过后端代理请求imgBB API，避免前端暴露你的API密钥。

内容的提问来源于stack exchange，提问作者Islam Y-