Node.js中Multer上传文件后，如何编写router.get返回图片？

首先，我来帮你搞定这个问题！你已经用Multer成功实现了文件上传的POST接口，现在要返回图片的核心思路是让服务器读取到uploads文件夹里的文件，并正确响应给客户端。这里有两种常用方案，我给你详细说明：

方案一：用Express静态资源托管（最简单快捷） #

Express自带的express.static可以直接托管静态文件，这样上传的图片就能通过URL直接访问，不需要额外写复杂的GET接口。

操作步骤： #

1. 在你的主Express应用文件（比如app.js或server.js）里添加一行代码，把uploads文件夹设为静态资源目录：

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

// 托管uploads文件夹，访问路径为 /uploads/文件名
app.use('/uploads', express.static('uploads'));

// 挂载你的upload路由
const uploadRouter = require('./upload');
app.use('/upload', uploadRouter);

2. 上传文件后，比如生成的文件名是file-1699999999999.jpg，你就可以通过GET请求 http://你的域名/uploads/file-1699999999999.jpg 直接访问这张图片。

注意：你当前的代码生成文件名时没有保留原文件的扩展名（比如.jpg/.png），这会导致浏览器无法识别图片类型，显示异常。建议修改diskStorage里的filename函数，加上文件扩展名：

const path = require('path'); // 先引入path模块

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads');
  },
  filename: function (req, file, cb) {
    // 保留原文件的扩展名
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
  },
});

方案二：编写自定义GET接口（适合权限验证等场景） #

如果需要对图片访问做额外处理（比如权限校验、日志记录），可以自己写一个GET接口，手动读取文件并返回。

修改你的upload.js，添加GET接口： #

var multer = require('multer');
var express = require('express');
const router = express.Router();
const path = require('path');
const fs = require('fs'); // 引入fs模块用于读取文件

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads');
  },
  filename: function (req, file, cb) {
    // 保留扩展名，确保图片能正确显示
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
  },
});

var upload = multer({ storage: storage });

// 原有的POST上传接口
router.post('/', upload.single('file'), (req, res, next) => {
  const file = req.file;
  if (!file) {
    const error = new Error('Please upload a file');
    error.httpStatusCode = 400;
    return next(error);
  }
  // 返回文件信息时，附带访问路径方便前端使用
  res.send({
    ...file,
    accessUrl: `/upload/${file.filename}` // 对应下面的GET接口路径
  });
});

// 新增的GET接口：根据文件名返回图片
router.get('/:filename', (req, res) => {
  const filename = req.params.filename;
  // 注意路径要匹配你的项目结构，这里假设uploads在项目根目录
  const filePath = path.join(__dirname, '../uploads', filename);

  // 检查文件是否存在
  if (!fs.existsSync(filePath)) {
    return res.status(404).send('File not found');
  }

  // 自动识别文件MIME类型，确保浏览器正确解析
  const mime = require('mime-types');
  const contentType = mime.lookup(filePath) || 'application/octet-stream';

  // 设置响应头并流式返回文件（避免大文件占用过多内存）
  res.setHeader('Content-Type', contentType);
  fs.createReadStream(filePath).pipe(res);
});

module.exports = router;

补充说明： #

• 接口通过/:filename接收文件名参数，前端可以直接用上传接口返回的accessUrl发起请求。
• 需要先安装mime-types模块：npm install mime-types，它能自动识别文件的类型。
• 用流式读取文件的方式，比一次性读取整个文件更高效，适合处理大图片。

你可以根据自己的需求选择方案：静态托管适合简单的公开图片访问，自定义接口适合需要额外逻辑的场景。

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