详解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制作爬虫全过程(续)
Dec 22 NodeJs
Nodejs学习笔记之NET模块
Jan 13 NodeJs
nodejs 整合kindEditor实现图片上传
Feb 03 NodeJs
使用NodeJs 开发微信公众号(三)微信事件交互实例
Mar 02 NodeJs
nodejs基础知识
Feb 03 NodeJs
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
Mar 28 NodeJs
nodejs 终端打印进度条实例代码
Apr 22 NodeJs
使用nodejs爬取前程无忧前端技能排行
May 06 NodeJs
Nodejs中使用captchapng模块生成图片验证码
May 18 NodeJs
详解nodejs模板引擎制作
Jun 14 NodeJs
Nodejs中的JWT和Session的使用
Aug 21 NodeJs
详解NodeJS模块化
Jun 15 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
PHP学习笔记之二
2011/01/17 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
python中assert用法实例分析
2015/04/30 Python
深入学习python的yield和generator
2016/03/10 Python
python中set()函数简介及实例解析
2018/01/09 Python
python re模块findall()函数实例解析
2018/01/19 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
大学生简历中个人的自我评价
2013/10/06 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
大学学风建设方案
2014/05/04 职场文书
万能检讨书
2015/01/27 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
停水通知
2015/04/16 职场文书
义诊活动通知
2015/04/24 职场文书
《火烧云》教学反思
2016/02/23 职场文书
浅析Django接口版本控制
2021/06/26 Python
Pygame Event事件模块的详细示例
2021/11/17 Python