Express+Multer文件上传日志显示空数组问题求助

服务端（Firebase Cloud Function）常见问题及修复 #

1. 中间件顺序错误
   不要在Multer中间件前使用express.json()或express.urlencoded()，这两个中间件会提前解析请求体，导致Multer无法读取multipart格式的文件数据。
   错误示例：

   app.use(express.json()); // 该中间件会导致Multer失效
   app.post('/upload', upload.array('files'), (req, res) => { ... })
   

   正确做法：移除这类中间件，或确保Multer中间件在它们之前执行。

2. Multer存储配置错误
   Firebase Cloud Function不支持本地磁盘存储，必须使用memoryStorage()：

   const storage = multer.memoryStorage();
   const upload = multer({ storage: storage });
   

3. 字段名不匹配
   确保upload.array('files')中的字段名和客户端formData中使用的字段名完全一致（大小写敏感），比如客户端用formData.append('files', file)，服务端就必须用'files'。

客户端（React Dropzone + Axios）常见问题及修复 #

1. 手动设置Content-Type导致解析失败
   Axios会自动根据FormData生成带boundary的multipart/form-data请求头，手动设置会丢失boundary，导致服务端无法解析：
   错误示例：

   await axios.post(url, formData, {
     headers: { 'Content-Type': 'multipart/form-data' }
   });
   

   正确做法：删除手动设置的headers，让Axios自动处理。

2. FormData添加文件方式错误
   确保每个文件都通过append方法添加到FormData，且字段名和服务端匹配：

   const formData = new FormData();
   acceptedFiles.forEach(file => {
     formData.append('files', file); // 字段名和服务端的'files'一致
   });
   

完整代码示例 #

服务端

const functions = require('firebase-functions');
const express = require('express');
const multer = require('multer');
const app = express();

// 初始化Multer内存存储
const storage = multer.memoryStorage();
const upload = multer({ 
  storage: storage,
  limits: { fileSize: 10 * 1024 * 1024 } // 限制文件大小为10MB
});

// 上传接口，确保字段名'files'和客户端一致
app.post('/upload', upload.array('files'), (req, res) => {
  console.log('接收的文件:', req.files);
  if (!req.files || req.files.length === 0) {
    return res.status(400).send('未检测到上传文件');
  }
  // 后续文件处理逻辑（比如上传到Cloud Storage）
  res.status(200).send(`成功上传${req.files.length}个文件`);
});

exports.api = functions.https.onRequest(app);

客户端

import { useDropzone } from 'react-dropzone';
import axios from 'axios';

const FileUploadComponent = () => {
  const { getRootProps, getInputProps } = useDropzone({
    accept: '*/*', // 根据需求调整文件类型限制
    onDrop: async (acceptedFiles) => {
      const formData = new FormData();
      acceptedFiles.forEach(file => {
        formData.append('files', file);
      });

      try {
        const response = await axios.post(
          'https://your-cloud-function-url.cloudfunctions.net/api/upload',
          formData
        );
        console.log('上传结果:', response.data);
      } catch (err) {
        console.error('上传失败:', err.response?.data || err.message);
      }
    }
  });

  return (
    <div {...getRootProps({ className: 'dropzone' })}>
      <input {...getInputProps()} />
      <p>拖放文件到此处，或点击选择文件</p>
    </div>
  );
};

export default FileUploadComponent;

额外排查点 #

• 检查文件大小是否超过Multer配置的limits.fileSize，超过的话文件会被过滤，导致req.files为空。
• 查看Firebase Cloud Function的日志，确认请求是否到达服务端，以及请求体的格式是否正确（可以用console.log(req.headers)查看content-type是否包含multipart/form-data; boundary=xxx）。

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