node-express使用multer上传图片无后缀、浏览器无法显示问题咨询

问题核心原因梳理 #

1. 文件无扩展名 #

multer默认配置仅生成随机哈希文件名，不会保留原始文件的后缀名，需要自定义存储规则手动拼接扩展名。

2. 图片无法浏览器加载 #

存在三个错误点：

• 未将uploads目录注册为express静态资源服务目录，浏览器无法请求到该目录下的文件
• 返回给img标签的src属性使用了服务器本地绝对磁盘路径，浏览器没有权限访问服务器本地文件系统
• 文件路径拼接重复添加了uploads前缀，导致图片实际存储路径与预期不符，resize后的文件写入了错误位置

修复后完整代码 #

const express = require('express')
const multer  = require('multer')
const path = require('path')
const child_process = require("child_process");
const app = express();
const PORT = 3000;

// 自定义multer存储规则，保留文件扩展名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    // 生成唯一文件名+原始文件扩展名
    const randomName = Math.random().toString(16).slice(2) + Date.now().toString(16)
    const ext = path.extname(file.originalname)
    cb(null, randomName + ext)
  }
})
const upload = multer({ storage: storage })

// 注册uploads目录为静态资源目录，允许浏览器访问
app.use('/uploads', express.static(path.join(__dirname, 'uploads')))
app.use('/', express.static(path.join(__dirname, 'public')));

app.post('/upload', upload.single('picture'), function (req, res, next) {
  // 直接取multer返回的文件本地绝对路径
  const fileLocalPath = path.join(__dirname, req.file.path)
  
  child_process.execFile(
    "/usr/bin/convert",
    [fileLocalPath, "-resize", "280x150", fileLocalPath],
    function() {
      console.log('done resizing', fileLocalPath)
      // 返回浏览器可访问的URL路径，不是本地磁盘路径
      return res.send(`<img src="/uploads/${req.file.filename}"/>`);
    }
  );
});

app.listen(PORT, function () { console.log('Example app listening on port: ', PORT) })

关键修改说明 #

• 替换multer默认的dest配置为自定义storage配置，自动拼接原始文件的扩展名，解决无后缀问题
• 新增uploads目录的静态资源映射，浏览器可以通过/uploads/文件名的路径访问图片
• 修正img标签的src属性为服务器可访问的URL路径，而非本地磁盘路径
• 修正路径拼接逻辑，避免重复添加uploads前缀导致文件写入错误位置

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