如何在独立文件的Express控制器中正确使用express-fileupload中间件？

问题描述 #

直接在主文件中使用express-fileupload实现文件上传的代码可正常运行：

const fileUpload = require('express-fileupload');

app.use(fileUpload({useTempFiles: true}));

app.post('/upload', (req, res) => {
   const { image } = req.files;
   // 文件处理逻辑
});

对应前端上传表单<input type="file" name="image" />，能正常获取到req.files.image。

但将路由拆分到独立文件后，/api/save接口无法获取上传文件：
主文件挂载路由：

app.use('/api', routes);

routes.js内容：

router.get('/save', controller.save);

controller.js内容：

exports.save = (req, res) => {
    let {image} = req.files; // image为undefined
    // 文件处理逻辑
};

尝试在路由中单独挂载中间件后，接口出现无限加载，无法进入控制器方法：

router.get('/save', fileUpload, controller.save);

错误原因及解决方案 #

1. 中间件挂载顺序错误 #

确保express-fileupload中间件的挂载早于路由挂载。如果主文件中先挂载/api路由，再挂载文件上传中间件，中间件不会对/api下的接口生效。

正确的主文件代码顺序：

const fileUpload = require('express-fileupload');
const routes = require('./routes');

// 先挂载文件上传中间件
app.use(fileUpload({useTempFiles: true}));
// 再挂载路由
app.use('/api', routes);

2. 使用了错误的请求方法 #

文件上传必须使用POST（或PUT）请求，GET请求无法携带文件数据。修改路由的请求方法：
routes.js调整为：

router.post('/save', controller.save);

同时前端表单需设置正确的请求方法和编码类型：

<form action="/api/save" method="post" enctype="multipart/form-data">
  <input type="file" name="image" />
  <button type="submit">上传</button>
</form>

3. 单独挂载中间件时缺少配置参数 #

若需在特定路由单独挂载中间件，必须传入与全局挂载一致的配置（如useTempFiles: true），否则可能因临时文件处理逻辑异常导致请求卡住：

// routes.js中正确写法
router.post('/save', fileUpload({useTempFiles: true}), controller.save);

推荐方案 #

优先选择全局挂载中间件+正确请求方法的方式，无需重复配置即可让所有路由复用文件上传能力，步骤如下：

1. 主文件中确保中间件挂载顺序在路由之前；
2. 路由使用POST方法定义上传接口；
3. 前端表单设置method="post"和enctype="multipart/form-data"。

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