如何从content-type为multipart/form-data的POST请求中提取上传文件

解决方案 #

Express 原生不支持解析 multipart/form-data 类型的请求体（文件上传场景使用的标准请求格式），你需要使用专门的中间件 multer 处理文件上传，操作步骤如下：

1. 安装依赖 #

首先安装multer，如果你是TypeScript项目，同时安装类型声明包：

npm install multer
# TS 项目额外执行
npm install @types/multer -D

2. 配置multer中间件 #

根据你的业务需求选择存储模式：

• 内存存储：文件不会写入磁盘，直接保存在内存中，适合你当前直接读取CSV内容处理、不需要持久化存储文件的场景
• 磁盘存储：文件会保存到服务器指定目录，适合需要留存上传文件的场景

这里以处理CSV的场景为例，使用内存存储配置：

// 引入multer
const multer = require('multer');
// TS 引入方式：import * as multer from 'multer';

// 内存存储配置
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

3. 修改路由代码注入中间件 #

你前端提交的文件字段名为file，因此使用upload.single('file')处理单文件上传即可：

// 注意在checkAuthentication后面加上upload中间件
router.post("/classify-csv", checkAuthentication, upload.single('file'), async (req: Request, res: Response) => {
    logging.info("Classification post", "Classification post-request called.");
  
    try {
        // 上传的文件信息直接从req.file获取
        const uploadFile = req.file;
        // 常用字段示例
        console.log('原始文件名：', uploadFile.originalname);
        console.log('文件大小：', uploadFile.size);
        // 内存模式下文件二进制内容存在buffer中，转字符串即可拿到CSV文本内容
        const csvContent = uploadFile.buffer.toString('utf-8');
        // 后续可直接解析csvContent做分类逻辑处理
        
        // 业务处理完成后返回响应
        res.status(200).json({ message: '文件处理成功' });
    }
    catch (err) {
        console.log(err);
        res.status(500).json({ error: '文件处理失败' });
    }
});

req.file常用字段说明 #

• originalname：用户上传的原始文件名
• mimetype：文件的MIME类型，可用于校验上传文件是否为CSV格式
• size：文件大小，单位为字节
• buffer：内存存储模式下的文件二进制内容
• path：磁盘存储模式下的文件本地存储路径

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