React端无法加载Node.js+Multer上传到本地存储的图片问题咨询

路径不匹配问题 #

你当前的静态资源服务配置和Multer存储路径存在不一致风险：

• Express的express.static配置用的是path.join(__dirname,'/tmp/my-uploads')，路径前缀的斜杠会让拼接结果完全依赖__dirname的实际值
• Multer的存储路径用的是相对路径./tmp/my-uploads，该路径是相对于你启动Node进程的工作目录，不是相对于代码文件的目录，只要启动Node的位置变了，两个路径指向的就不是同一个文件夹
  修复方案：把Multer的存储路径也改成和静态资源一致的绝对路径：

// Multer中间件代码修改
destination: function (req, file, cb) {
  cb(null, path.join(__dirname, "./tmp/my-uploads"));
},

建议同时把静态资源挂载的路径和实际存储路径做区分避免混淆，修改后访问路径更简洁：

// app.js修改
app.use('/uploads',express.static(path.join(__dirname,'/tmp/my-uploads')))
// 前端访问路径同步改成 http://localhost:3000/uploads/xxx.jpg

前端逻辑错误 #

你当前用Array.filter()的逻辑完全不符合需求：

• filter方法只会返回原数组中符合判断条件的元素组成的新数组，不会返回你在回调里写的URL字符串
• 你拿到的image变量是包含符合条件的图片对象的数组，不是可直接访问的URL字符串，直接用来当图片src肯定加载失败
  修复方案：改用Array.find()方法找主图，再拼接URL：

// 前端代码修改
const primaryImage = CarsImages.find(image => image.primary === true);
const imageUrl = primaryImage ? `http://localhost:3000/tmp/my-uploads/${primaryImage.filename}` : '';
// 渲染图片时用imageUrl作为src属性值

附加排查项 #

• 检查tmp/my-uploads目录的读写权限，确保Node进程有权限读取该目录下的文件
• 直接在浏览器地址栏输入完整的图片URL，看是否能正常访问：返回404则确认是路径匹配问题，返回403则是权限问题
• 检查你存储到数据库的filename字段是否和实际保存的文件名完全一致，有没有多后缀、缺字符的问题
• 如果前端服务端口和Node服务端口不一致，要在Node端配置CORS跨域，否则会因为跨域限制无法加载图片

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