详解nodejs实现本地上传图片并预览功能(express4.0+)


Posted in NodeJs onJune 28, 2017

Express为:4.13.1  multyparty: 4.1.2

代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览

写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\"+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览。前端采用通过ajax方式上传文件,使用FormData进行ajax请求  ,nodejs端采用multiparty模块

相关查看文档:

node-multiparty github

FormData - Web APIs | MDN

部分代码:

<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>

 js中采用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);
        }
      });  
    }
  });

 nodejs 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什么的,并木有列出来

点击空白处,上传图片,接下来的功能就是点击上传把地址放到数据库里~(这个功能还木有做呢)

详解nodejs实现本地上传图片并预览功能(express4.0+)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs 后缀名判断限制代码
Mar 31 NodeJs
nodejs开发环境配置与使用
Nov 17 NodeJs
Nodejs实现多人同时在线移动鼠标的小游戏分享
Dec 06 NodeJs
初探nodeJS
Jan 24 NodeJs
nodejs基础应用
Feb 03 NodeJs
nodejs中向HTTP响应传送进程的输出
Mar 19 NodeJs
nodejs multer实现文件上传与下载
May 10 NodeJs
nodejs密码加密中生成随机数的实例代码
Jul 17 NodeJs
使用Nodejs连接mongodb数据库的实现代码
Aug 21 NodeJs
nodejs中函数的调用实例详解
Oct 31 NodeJs
详解nodejs http请求相关总结
Mar 31 NodeJs
nodejs实现的http、https 请求封装操作示例
Feb 06 NodeJs
NodeJS链接MySql数据库的操作方法
Jun 27 #NodeJs
NodeJS自定义模块写法(详解)
Jun 27 #NodeJs
docker中编译nodejs并使用nginx启动
Jun 23 #NodeJs
NodeJs中express框架的send()方法简介
Jun 20 #NodeJs
深入浅析Nodejs的Http模块
Jun 20 #NodeJs
Nodejs实现多房间简易聊天室功能
Jun 20 #NodeJs
NodeJS 实现手机短信验证模块阿里大于功能
Jun 19 #NodeJs
You might like
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
php下过滤HTML代码的函数
2007/12/10 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php实现源代码加密的方法
2015/07/11 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
深入理解js中this的用法
2016/05/28 Javascript
JS前端笔试题分析
2016/12/19 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
jQuery each和js forEach用法比较
2019/02/27 jQuery
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Python线程threading模块用法详解
2020/02/26 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
《九色鹿》教学反思
2014/02/27 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
品酒会策划方案
2014/05/26 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
教师群众路线心得体会
2014/11/04 职场文书
六年级学生评语大全
2014/12/26 职场文书
高三语文教学反思
2016/02/16 职场文书
《春酒》教学反思
2016/02/22 职场文书