NodeJS服务器如何获取POST请求中的上传文件？

我帮你搞定这个问题！你现在拿不到文件是因为Express默认不会解析multipart/form-data类型的请求体——这正是文件上传常用的格式。咱们用multer这个专门处理文件上传的中间件就能解决，步骤很清晰：

1. 安装multer #

先在你的Node项目里安装依赖：

npm install multer
# 或者用yarn
yarn add multer

2. 配置multer并修改Node端路由 #

你可以选择把文件存在磁盘，或者临时存在内存里（根据需求选）。这里给你两种常见配置：

配置一：存储到磁盘 #

适合需要持久化保存文件的场景，记得提前创建好uploads文件夹：

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

// 配置存储路径和文件名规则，避免文件重名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads') // 指定文件存储目录
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
    // 生成唯一文件名：字段名-时间戳-随机数-原后缀
    cb(null, `${file.fieldname}-${uniqueSuffix}.${file.originalname.split('.').pop()}`)
  }
})

const upload = multer({ storage: storage })

// 修改路由，用upload.single()处理单文件上传（参数是前端表单的文件字段名）
app.post('/imgUpload', upload.single('avatar'), function(req, res) {
  // 现在就能拿到文件了！
  console.log('上传的文件详情:', req.file);
  // 如果有其他表单字段，会存在req.body里
  console.log('其他表单数据:', req.body);
  
  res.status(200).json({ message: '文件上传成功', fileInfo: req.file })
})

配置二：临时存在内存 #

适合不需要保存文件，只需要读取文件内容处理的场景：

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

app.post('/imgUpload', upload.single('avatar'), function(req, res) {
  // 文件二进制内容存在req.file.buffer里
  console.log('文件二进制数据:', req.file.buffer);
  console.log('文件基础信息:', req.file);
  
  res.status(200).json({ message: '文件接收成功' })
})

3. 确保React端请求格式正确 #

React端必须用FormData构造请求体，而且不要手动设置Content-Type（浏览器会自动加上正确的multipart/form-data边界）。修改你的send方法：

class RyanForm extends React.Component {
  send() {
    const formData = new FormData();
    // 假设你有一个文件输入框，通过ref获取文件
    const file = this.fileInput.files[0];
    // 这里的'avatar'要和Node端upload.single()的参数完全一致！
    formData.append('avatar', file);
    
    // 发送POST请求
    fetch('/imgUpload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => console.log('上传结果:', data))
    .catch(error => console.error('上传失败:', error));
  }

  render() {
    return (
      <div>
        <input type="file" ref={input => this.fileInput = input} />
        <button onClick={() => this.send()}>上传图片</button>
      </div>
    );
  }
}

额外提示 #

• 如果是多文件上传，把upload.single('avatar')换成upload.array('avatars', 5)（5是允许的最大文件数），然后用req.files获取所有文件列表。
• 可以添加文件大小、类型限制，比如只允许5MB以内的图片：

  const upload = multer({
    storage: storage,
    limits: { fileSize: 1024 * 1024 * 5 }, // 限制5MB
    fileFilter: function (req, file, cb) {
      // 只允许jpg/png/gif格式
      if (!file.originalname.match(/\.(jpg|jpeg|png|gif)$/)) {
        return cb(new Error('仅支持上传图片文件'))
      }
      cb(null, true)
    }
  })
  

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