Node.js使用Multer上传图片无后缀扩展名问题如何解决？

你当前使用的dest参数是Multer的简易配置模式，该模式下会自动生成32位十六进制随机字符串作为存储文件名，不会保留原始文件的扩展名，因此上传后的文件无法直接被识别为图片格式，手动追加扩展名后才能正常打开。

替换原有Multer初始化逻辑，使用multer.diskStorage自定义存储规则，主动拼接文件扩展名即可，完整修改后的服务端代码如下：

const multer  = require('multer');
// 引入node内置path模块，用于提取文件扩展名
const path = require('path');

// 自定义存储配置
const storage = multer.diskStorage({
  // 指定文件存储路径，和之前的dest路径保持一致
  destination: function (req, file, cb) {
    cb(null, __dirname + '/uploads/')
  },
  // 自定义生成文件名
  filename: function (req, file, cb) {
    // 生成随机字符串作为文件名主体，避免重名覆盖
    const randomName = Array(32).fill(null).map(() => (Math.round(Math.random() * 16)).toString(16)).join('')
    // 提取原始文件的扩展名
    const ext = path.extname(file.originalname)
    // 拼接为 随机名+扩展名 的格式
    cb(null, randomName + ext)
  }
})

// 用自定义storage初始化multer，无需再传dest参数
var upload = multer({ storage: storage });

app.post('/test.html', upload.single('avatar'),function (req,res,next){
  console.log("mimetype"+req.file.mimetype);
  res.render('test', {})       
});

前端表单代码无需做任何修改，修改后上传的文件就会自动携带正确的扩展名，可直接打开访问。

如果需要限制仅允许上传图片，可新增fileFilter配置拦截非法文件：

var upload = multer({
  storage: storage,
  fileFilter: (req, file, cb) => {
    const allowMimeTypes = ['image/jpeg', 'image/png', 'image/gif']
    if (allowMimeTypes.includes(file.mimetype)) {
      cb(null, true)
    } else {
      cb(new Error('仅支持上传jpg、png、gif格式的图片'), false)
    }
  }
})

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