使用Multer按文件类型创建文件夹时fileType未定义问题求助

问题说明 #

我想用multer模块为每种文件类型创建独立文件夹，但在multer磁盘存储的destination回调中，req.body.fileType始终显示未定义，不过在app.post的中间件函数里却能正确获取到该值。

客户端代码 #

const formData = new FormData()

console.log(file)
formData.append('file', file)
formData.append('fileType', 'video')

axios.post('http://localhost:5000/storeOnHDD', formData, {
    headers: {
        'Content-Type': 'multipart/form-data',
    },
})
.then(res => {
    console.log(res.data)
})
.catch((err) => {
    console.log(err)
})

服务端代码 #

基础配置 #

const express = require('express')
const cors = require('cors')
const multer = require('multer')
const fs = require('fs')

const app = express();
app.use(cors())
app.use(express.json())

目录创建工具函数 #

// 若目录不存在则创建
const createDirIfNotExists = (dir) => {
    if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir, { recursive: true })
    }
}

Multer存储配置 #

// 配置multer磁盘存储
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        const fileType = req.body.fileType
        const uploadPath = `./uploads/${fileType}`

        createDirIfNotExists(uploadPath)

        cb(null, uploadPath)
    },
    filename: (req, file, cb) => {
        cb(null, `${Date.now()}-${file.originalname}`);
    }
})

const upload = multer({ storage: storage })

POST接口 #

app.post('/storeOnHDD', upload.single('file'), (req, res) => {
    console.log(req.body) // 此处能正确获取fileType和文件信息
    if (!req.file) {
        return res.status(400).send('No file uploaded');
    }

    res.status(200).send({
        message: 'File uploaded successfully',
        file: req.file,
    });
})

当前问题现象 #

上传文件后，服务器会创建./uploads/undefined文件夹，而非预期的对应类型文件夹：

期望结果 #

根据上传时传入的fileType值（如video、image），自动创建对应名称的文件夹，并将文件存入其中，例如./uploads/video、./uploads/image。

解决办法 #

核心原因 #

multer在处理文件时，会优先解析文件部分；如果FormData中文本字段（如fileType）排在文件之后，此时文本字段还未被解析到req.body，导致destination回调中req.body.fileType为undefined。

具体修复 #

调整客户端FormData中字段的顺序，先添加文本字段fileType，再添加文件：

const formData = new FormData()
formData.append('fileType', 'video') // 先添加文本字段
formData.append('file', file) // 后添加文件

axios.post('http://localhost:5000/storeOnHDD', formData, {
    headers: {
        'Content-Type': 'multipart/form-data',
    },
})
.then(res => {
    console.log(res.data)
})
.catch((err) => {
    console.log(err)
})

修改后，multer在处理文件时，fileType已经被解析到req.body中，destination回调就能正确获取到值，从而创建对应的文件夹。

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