在Node.js项目中实现文件上传功能时，Multer是非常常用的中间件，它能够帮助我们快速处理multipart/form-data类型的表单数据。但要保证Multer正常工作，前端的HTML表单配置必须符合特定要求，否则会出现文件无法接收、上传报错等问题。
Multer文件上传的基本工作原理
Multer是专门用来处理multipart/form-data格式数据的Node.js中间件，它会在请求到达路由处理函数之前，解析请求体中的文件数据，把文件信息挂载到req.file或者req.files上，同时把普通的表单字段挂载到req.body上。如果前端的表单没有正确设置编码类型，Multer就无法解析到文件数据，自然会导致上传失败。
HTML表单必须配置的核心属性
要让Multer能正确接收文件，HTML表单需要满足两个核心配置要求，缺一不可。
1. 设置正确的enctype属性
表单的enctype属性用来指定表单数据发送到服务器时的编码类型，文件上传时必须将其设置为multipart/form-data，如果不设置或者设置为其他值，浏览器会用默认的application/x-www-form-urlencoded编码，这种编码方式会把文件数据转换成字符串，Multer无法解析。
正确的表单enctype配置如下：
<form action="/upload" method="post" enctype="multipart/form-data"> </form>
2. 设置正确的input类型
用于选择文件的<input>标签必须将type属性设置为file，同时建议给input设置name属性，这个name属性会和后端Multer的配置对应，用来标识上传的文件。
示例代码如下：
<form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="uploadFile"> <button type="submit">上传文件</button> </form>
后端Multer的基础配置示例
前端的表单配置正确后，后端也需要正确初始化Multer，这里给出一个基础的后端配置示例，使用的是Express框架。
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
// 配置存储路径和文件名
const storage = multer.diskStorage({
destination: function (req, file, cb) {
// 文件存储的目录，需要确保该目录存在
cb(null, path.join(__dirname, 'uploads'));
},
filename: function (req, file, cb) {
// 给文件添加时间戳避免重名
const uniqueName = Date.now() + '-' + file.originalname;
cb(null, uniqueName);
}
});
// 初始化multer，单文件上传时用single方法，参数对应前端input的name属性
const upload = multer({ storage: storage });
// 上传接口
app.post('/upload', upload.single('uploadFile'), (req, res) => {
// req.file就是上传的文件信息
console.log(req.file);
res.send('文件上传成功');
});
app.listen(3000, () => {
console.log('服务启动在3000端口');
});
常见的表单配置错误排查
如果上传时出现错误，可以先排查以下几个表单相关的常见问题：
- 检查表单是否遗漏了
enctype="multipart/form-data"属性，这是最常见的错误原因。 - 检查文件input的
name属性和后端upload.single()方法的参数是否一致，不一致会导致无法接收到文件。 - 如果是多文件上传，前端的input需要添加
multiple属性，后端要使用upload.array('inputName', maxCount)方法，同时input的name属性也要对应。 - 不要给表单设置
enctype之外的错误编码，也不要用Ajax手动设置请求头的Content-Type，浏览器在提交multipart/form-data表单时会自动生成正确的边界标识。
多文件上传的表单配置示例
如果需要实现多文件上传，前端的表单配置只需要给文件input添加multiple属性即可：
<form action="/upload-multiple" method="post" enctype="multipart/form-data"> <input type="file" name="uploadFiles" multiple> <button type="submit">上传多个文件</button> </form>
对应的后端配置需要使用array方法：
// 最多允许上传5个文件
app.post('/upload-multiple', upload.array('uploadFiles', 5), (req, res) => {
// req.files是上传的文件数组
console.log(req.files);
res.send('多文件上传成功');
});