react-dropzone文件传至Express服务器：无法获取上传文件

你遇到的核心问题出在客户端请求格式错误和服务端缺少文件解析中间件两部分，下面分步修正：

一、客户端代码修正 #

你的代码犯了两个关键错误：

1. 不能用JSON.stringify()处理FormData，这会直接破坏文件的二进制结构
2. 批量添加文件到FormData时，需要循环逐个append，而非直接传递数组

修正后的客户端代码：

export default async function UploadToFireStorage(acceptedfiles, fileVals) {
  const formData = new FormData();
  // 循环添加每个文件到FormData，确保服务端能识别为数组
  acceptedfiles.forEach(file => {
    formData.append('files', file);
  });

  try {
    const response = await fetch(`https://someUrl/uploadNewFiles`, {
      method: "POST",
      body: formData // 直接传递FormData，无需转JSON，浏览器会自动设置正确的请求头
    });

    const jsonData = await response.json();
    console.log(jsonData);
  } catch (error) {
    console.log(error);
  }
}

二、服务端代码修正 #

Express默认无法解析multipart/form-data格式的请求（也就是文件上传的请求格式），必须使用multer中间件来处理。

步骤1：安装multer #

npm install multer

步骤2：修正服务端代码 #

const express = require('express');
const multer = require('multer');
const app = express();

// 配置multer为内存存储（适合直接上传到云存储，比如你的Firebase Storage）
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 使用multer中间件，接收名为'files'的文件数组
app.post('/uploadNewFiles', upload.array('files'), async (req, res) => {
  try {
    const files = req.files; // 从这里获取上传的文件数组
    if (!files || files.length === 0) {
      return res.json('No files uploaded');
    }

    for (let file of files) {
      // 用file.buffer获取文件二进制数据，传给Firebase的uploadBytesResumable
      let storageRef = ref(storage, `files/${file.originalname}`);
      let uploadTask = await uploadBytesResumable(storageRef, file.buffer);
    }

    // 返回简化的文件信息，避免返回过多冗余数据
    res.json({ 
      message: 'Files uploaded successfully', 
      uploadedFiles: files.map(f => ({ name: f.originalname, size: f.size })) 
    });
  } catch (error) {
    res.json('Error: ' + error.message);
  }
});

补充说明 #

• multer的存储方式：上面用的memoryStorage是把文件存在内存中，适合直接转存到云服务；如果需要先把文件存在服务器磁盘，可以改用multer.diskStorage()配置存储路径
• req.files里的每个文件对象包含originalname（原文件名）、buffer（二进制数据）、size（文件大小）等属性，按需使用即可
• 客户端不要手动设置Content-Type，浏览器会自动为FormData请求添加正确的multipart/form-data头及边界标识

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