React向Express上传图片时Form Data返回null问题求助

React端代码修正 #

你的React代码存在两个核心问题：

1. 将FormData对象包裹在另一个对象中传递，导致Express无法正确解析文件数据
2. 手动设置Content-Type: multipart/form-data会丢失自动生成的boundary标识，破坏文件解析逻辑

修正后的React代码：

const formData = new FormData();
formData.append('files', cartImg); 
// 若需上传图片数组，可多次调用append复用同一个key：
// formData.append('files', img1);
// formData.append('files', img2);

axios.post(`http://localhost:8800/imgUpload`, formData)
  .then((res) => setMessage(res.data))
  .catch(err => console.error(err));

Express端配置 #

Express默认不支持解析multipart/form-data类型的请求，必须借助multer中间件处理文件上传：

1. 安装multer依赖：

npm install multer

2. 配置Express路由：

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

// 配置multer内存存储（也可改为磁盘存储）
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 使用upload.array('files')处理多文件，单文件可改用upload.single('files')
app.post('/imgUpload', upload.array('files'), (req, res) => {
  console.log(req.files); // 现在能正常获取上传的文件数组
  res.status(200).json({ message: '文件上传成功', files: req.files });
});

app.listen(8800, () => console.log('服务器运行在8800端口'));

补充说明 #

• 若仅上传单张图片，将upload.array('files')替换为upload.single('files')，此时用req.file获取单个文件对象
• 如需将文件保存到磁盘，可修改multer的存储配置：

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads') // 需确保项目根目录下的uploads文件夹已创建
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname) // 生成唯一文件名避免冲突
  }
});

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