Node.js服务器文件上传方法及相册图片未加载问题解决

问题1：如何在Node.js环境下实现文件上传至服务器？ #

从你给出的代码片段来看，你已经在用multer这个常用的文件上传中间件了，不过里面有几个小细节得修正下，我一步步给你理清楚：

1. 修正代码里的错误点

   • 你写的checkFiletType是拼写错误，应该是checkFileType，不然会找不到这个校验函数
   • limits: {fileSize: 7}这里的单位是字节，7字节太小了，几乎传不了任何文件，建议改成合理的大小，比如7MB就写成7 * 1024 * 1024
   • 正则的test方法你没写完，要同时校验文件后缀和MIME类型才严谨

   修正后的核心代码大概是这样：

   const multer = require('multer');
   const path = require('path');
   
   // 配置存储路径和文件名规则
   const storage = multer.diskStorage({
     destination: function (req, file, cb) {
       cb(null, './uploads/'); // 一定要确保uploads文件夹存在，否则会报错
     },
     filename: function (req, file, cb) {
       cb(null, Date.now() + '-' + file.originalname); // 加时间戳避免文件名重复
     }
   });
   
   // 校验文件类型的函数
   function checkFileType(file, cb) {
     const fileTypes = /jpeg|jpg/;
     const extname = fileTypes.test(path.extname(file.originalname).toLowerCase());
     const mimetype = fileTypes.test(file.mimetype);
   
     if (extname && mimetype) {
       return cb(null, true);
     } else {
       cb('Error: 只允许上传JPG/JPEG格式的图片！');
     }
   }
   
   // 初始化multer实例
   var upload = multer({ 
     storage: storage, 
     limits: {fileSize: 7 * 1024 * 1024}, // 限制7MB以内的文件
     fileFilter: function (req, file, cb) { 
       checkFileType(file, cb); 
     } 
   }).single('filePhoto');
   
   // 在路由中使用上传中间件
   app.post('/upload', (req, res) => {
     upload(req, res, (err) => {
       if (err) {
         res.send(err);
       } else {
         if (req.file == undefined) {
           res.send('Error: 请选择要上传的文件！');
         } else {
           res.send(`文件上传成功：${req.file.filename}`);
         }
       }
     });
   });
   

2. 额外注意事项

   • 提前创建uploads文件夹，并且确保Node.js进程有该文件夹的读写权限
   • 如果是生产环境，建议把上传的文件存到云存储（比如对象存储服务），不要存在本地服务器，避免存储和带宽瓶颈

问题2：不上传图片到服务器，EJS页面生成相册时图片无法加载的解决办法 #

这种场景下图片没传到服务器，大概率是路径或者浏览器安全限制的问题，你可以从这几个方向排查：

1. 确认静态资源托管配置
   如果图片是放在项目的静态文件夹（比如public/images）里，得先在Express中配置静态资源托管：

   app.use(express.static(path.join(__dirname, 'public')));
   

   之后在EJS里引用图片时，路径要写/images/xxx.jpg，而不是相对路径../public/images/xxx.jpg

2. 处理本地图片的浏览器安全限制
   如果是用户选择的本地图片（没传到服务器），浏览器出于安全考虑，不允许直接访问本地文件路径（比如C:/xxx.jpg），这种情况得用FileReader把图片转成base64格式再渲染：

   // 前端JS处理本地图片
   const fileInput = document.getElementById('filePhoto');
   fileInput.addEventListener('change', (e) => {
     const file = e.target.files[0];
     const reader = new FileReader();
     reader.onload = function(event) {
       // 把base64字符串传到后端，存在条目数据里
       const base64Image = event.target.result;
       // 比如通过AJAX发送到后端保存
     };
     reader.readAsDataURL(file);
   });
   

   然后在EJS里直接用base64字符串作为图片的src：

   <div class="album">
     <% items.forEach(item => { %>
       <img src="<%= item.base64Image %>" alt="相册图片">
     <% }) %>
   </div>
   

3. 通过浏览器控制台排查错误
   打开浏览器开发者工具（F12），看Console和Network标签：

   • 如果是404状态，说明图片路径写错了，调整路径即可
   • 如果是跨域或安全错误，那就是浏览器限制了本地文件访问，用base64的方式就能解决

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