React+Express发送FormData文件失败问题求助

核心问题分析 #

• 手动设置Content-Type导致解析失败
  你手动指定了multipart/form-data的boundary，但axios在处理FormData时会自动生成并匹配正确的boundary，手动设置反而会让服务器无法识别请求格式。
• 传入FormData的不是有效文件对象
  你把Blob URL存入了状态，但Blob URL是字符串类型，FormData需要的是原生File或Blob对象，传字符串服务器无法识别为文件。
• 多文件上传方式错误
  如果args.imgs是文件数组，不能直接把整个数组append到FormData，需要逐个添加文件。
• 误用第三方FormData包
  浏览器环境自带原生FormData，不需要使用npm的form-data包（该包适用于Node.js环境），混用会导致异常。

修复后的代码示例 #

export const addNewProduct = createAsyncThunk('product/addNewProduct', async (args) => {
    const imgesCashingUrl = `${consts.server_url}collection/addProductImgs`;
    // 使用浏览器原生FormData，移除第三方包依赖
    const formData = new FormData();
    
    // 逐个添加文件（确保args.imgs是File对象数组，而非Blob URL）
    args.imgs.forEach(file => {
        formData.append('imgs', file);
    });

    // 移除手动设置的Content-Type，axios会自动处理
    const response = await axios.post(imgesCashingUrl, formData, {
        headers: {
            'accept': 'application/json,*/*',
            'Accept-Language': 'en-US,en;q=0.8'
        }
    });
    return response;
});

额外关键修正 #

• 状态存储调整：处理文件输入时，直接保存原始File对象到状态，Blob URL仅用于前端预览：

  // 文件输入回调示例
  const handleFileChange = (e) => {
      const files = Array.from(e.target.files);
      // 保存原始File对象到状态，用于上传
      setImgs(files);
      // 生成预览URL（仅用于前端显示）
      const previewUrls = files.map(file => URL.createObjectURL(file));
      setPreviewUrls(previewUrls);
  };
  

• Express服务器端配置：确保使用multer中间件处理文件上传：

  const multer = require('multer');
  const upload = multer({ dest: 'uploads/' }); // 指定文件存储目录
  
  // 路由要匹配前端的字段名（这里是imgs）
  app.post('/collection/addProductImgs', upload.array('imgs'), (req, res) => {
      console.log('已上传文件:', req.files);
      res.json({ success: true, files: req.files });
  });
  

内容的提问来源于stack exchange，提问作者Eslam Elnemery