Node.js Express 4.0+ 实现本地图片上传与预览

作者：栖木时间：2026-10-22 05:10:17浏览：463

本文详解如何在 Node.js Express 4.0+ 环境下实现本地图片上传及前端即时预览功能。针对本地路径 fakepath 限制，采用将图片暂存至服务器后返回路径的方案。前端利用 FormData 和 Ajax 异步提交文件，后端使用 multiparty 模块解析请求并保存文件，最终通过处理服务器路径实现图片展示。

环境配置与核心思路

本文使用的技术版本为：Express 4.13.1，multiparty 模块版本为 4.1.2。

核心代码主要实现将本地图片上传至 Node.js 服务器指定目录，并通过获取服务器端图片路径来实现前端的图片预览功能。

背景说明：计划实现图片上传与预览功能，但浏览器出于安全考虑，本地文件上传获取的路径格式通常为 C:\fakepath\文件名，无法直接用于预览真实文件。因此，解决方案是将图片上传至服务器，获取服务器返回的路径，从而在前端实现预览。前端采用 Ajax 方式上传文件，利用 FormData 对象构建请求；Node.js 服务端则采用 multiparty 模块处理文件流。

前端文件上传实现

部分前端代码实现：


<form name='picForm' action = "javascript:;"method="post" encype = "multipart/form-data" >
  <input type="file" id="test" id="j_imgfile">
</form>
<div>
  <img src="" id="j_imgPic">
</div>

在 JavaScript 中利用 change 事件，即在用户选择完图片后立即发送 Ajax 请求。


$('#j_imgfile').on('change',function(){
    // 判断上传文件类型
    var objFile = $('#j_imgfile').val();
    var objType = objFile.substring(objFile.lastIndexOf(".")).toLowerCase();
    var formData = new FormData(document.forms.namedItem("picForm"));
    console.log(objType);
    if(!(objType == '.jpg'||objType == '.png'))
    {
      alert("请上传jpg、png类型图片");
      return false;
    }else{
      $.ajax({
        type : 'post',
        url : '/uploadUserImgPre',
        data: formData ,
        processData:false,
        async:false,
        cache: false, 
         contentType: false, 
        success:function(re){
          re.imgSrc = re.imgSrc.replace('public','');
          re.imgSrc = re.imgSrc.replace(/\\/g,'\/');
          $('#j_imgPic').attr('src',re.imgSrc);
        },
        error:function(re){
          console.log(re);
        }
      });  
    }
  });

后端路由与服务端处理

Node.js app.js 中的路由配置代码。


app.post('/uploadUserImgPre',routes.users.uploadUserImgPre);

routes/users.js 中的具体处理逻辑代码。


 exports.uploadUserImgPre = function(req, res, next) {
 //生成multiparty对象，并配置上传目标路径
 var form = new multiparty.Form({uploadDir: './public/files/images'});
 form.parse(req, function(err, fields, files) {
  var filesTmp = JSON.stringify(files);
 
  if(err){
   console.log('parse error: ' + err);
  } else {
   testJson = eval("(" + filesTmp+ ")"); 
   console.log(testJson.fileField[0].path);
   res.json({imgSrc:testJson.fileField[0].path})
   console.log('rename ok');
  }
 });
}

路径处理与效果说明

部分逻辑说明：

文件上传至服务器后，保存路径 path 变为：public\files\images\W-jy9YsxsPjNpQHslzGvdXBk.jpg。

由于在 app.js 中已将 public 设置为静态资源默认路径，因此在整理返回给前端的地址时，需要去掉前缀 public，并将反斜杠 '\' 替换为正斜杠 '/'。


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

最终效果大致如下，HTML 部分因使用了 Jade 模板引擎以及额外的 CSS 样式，此处未完全列出。

点击空白区域即可上传图片，后续功能是将上传后的地址存入数据库（该功能暂未实现）。

环境配置与核心思路

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

NestJS 是什么？与 Express、Koa 的核心区别及选型建议

2026-11-05 13:46:41

生产环境升级 Node.js 的注意事项与兼容性测试策略

2026-11-05 09:19:24

nvm 常用命令详解：怎么平滑切换和升级 Node.js 版本

2026-11-04 09:02:34

JavaScript和JSP的根本区别：运行环境与执行机制解析

2026-11-03 23:30:18

使用nvm卸载指定版本Node.js并切换默认环境

2026-11-03 23:09:26