使用RTK Query上传图片至Cloudinary时出现400错误求助

核心问题 #

你在prepareHeaders里手动设置了content-Type: multipart/form-data，但发送FormData时，浏览器会自动生成包含boundary的正确Content-Type头（比如multipart/form-data; boundary=----WebKitFormBoundaryxxxx），手动设置会丢失boundary参数，导致后端无法正确解析表单数据，进而返回400错误，同时乱码是请求格式错误引发的响应异常。

解决方案步骤 #

• 移除手动设置的Content-Type
  修改uploadImgApi.js中的prepareHeaders部分，删掉手动设置content-Type的代码：

  prepareHeaders: (headers, { getState, endpoint }) => {
    const { token } = getState().user;
    if (token) {
      headers.set("Authorization", `${token}`);
      // 移除下面这行手动设置的代码
      // headers.set("content-Type", "multipart/form-data");
    }
    return headers;
  },
  

• 检查后端multipart解析配置
  后端Express需要使用multer中间件处理multipart/form-data请求，确保配置正确：

  const multer = require('multer');
  const upload = multer({ dest: 'uploads/' }); // 也可配置直接对接Cloudinary
  
  // 路由示例
  app.post('/upload/upload_avatar', upload.single('file'), async (req, res) => {
    // 执行上传到Cloudinary的逻辑
    const result = await cloudinary.uploader.upload(req.file.path);
    res.json({ url: result.secure_url });
  });
  

• 验证Cloudinary初始化配置
  确保后端已正确初始化Cloudinary SDK，配置好云名称、API密钥等参数：

  const cloudinary = require('cloudinary').v2;
  cloudinary.config({
    cloud_name: '你的云名称',
    api_key: '你的API密钥',
    api_secret: '你的API密钥'
  });
  

补充说明 #

发送FormData时无需手动设置Content-Type，fetch（包括RTK的fetchBaseQuery）会自动处理该请求头，添加正确的boundary信息，这是表单文件上传的标准行为。

内容的提问来源于stack exchange，提问作者Sachin Desai