为什么Multer的destination属性未触发且WebStorm提示未使用？

问题根因及解决方案 #

1. destination回调未执行、无报错的原因 #

• 请求格式不匹配：multer仅支持解析Content-Type: multipart/form-data格式的POST请求，如果你前端发送的是application/json格式的请求（包括把图片转成base64放在JSON body里的场景），multer会直接跳过执行逻辑，不会触发任何回调也不会抛出错误。
• 字段名不匹配：upload.single('data.image')指定的接收文件字段名，必须和前端FormData中上传文件的字段名完全一致。如果前端传文件的字段名不是data.image，multer找不到对应文件，也不会触发storage回调。
• 目录创建失败：你当前使用fs.mkdir创建目录时没有添加递归配置，如果public目录不存在，创建public/upload会直接报错，修正后的目录判断逻辑如下：

destination: function (req, file, cb) {
    console.log(req, file)
    const dir = 'public/upload';
    // 添加recursive:true 支持多级目录递归创建
    fs.mkdir(dir, { recursive: true }, error => cb(error, dir));
}

（注：添加recursive:true后不需要提前判断目录是否存在，已存在的情况下mkdir也不会报错）

2. WebStorm提示destination、filename属性未使用的原因 #

这是IDE静态检测的误报，原因是项目中没有安装multer对应的类型定义包，安装对应类型包即可解决：

npm i @types/multer -D

如果安装后仍有提示，可以在storage对象上方添加注释// noinspection JSUnusedGlobalSymbols手动忽略该误报，不影响代码实际运行。

可选优化点 #

当前filename的配置没有保留原文件的后缀名，保存后的文件会没有扩展名，无法直接被预览识别，可以调整为：

filename: function (req, file, cb) {
    const ext = file.originalname.split('.').pop();
    cb(null, file.fieldname + '-' + Date.now() + '.' + ext);
}

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