详解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 相关文章推荐
golang、python、php、c++、c、java、Nodejs性能对比
Mar 12 NodeJs
nodejs初步体验篇
Nov 23 NodeJs
NodeJS实现阿里大鱼短信通知发送
Jan 17 NodeJs
用nodejs的实现原理和搭建服务器(动态)
Aug 10 NodeJs
nodejs后台集成ueditor富文本编辑器的实例
Jul 11 NodeJs
详解nodeJs文件系统(fs)与流(stream)
Jan 24 NodeJs
解决Nodejs全局安装模块后找不到命令的问题
May 15 NodeJs
NodeJS读取分析Nginx错误日志的方法
May 14 NodeJs
nodejs和react实现即时通讯简易聊天室功能
Aug 21 NodeJs
nodejs简单抓包工具使用详解
Aug 23 NodeJs
nodejs+express最简易的连接数据库的方法
Dec 23 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
js代码实现微博导航栏
2015/07/30 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
生成二维码方法汇总
2014/12/26 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
答题辅助python代码实现
2018/01/16 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
python Timer 类使用介绍
2020/12/28 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
工程师自我评价怎么写
2013/09/19 职场文书
人事专员工作职责
2014/02/22 职场文书
爱耳日活动总结
2014/04/30 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
运动会班级口号
2014/06/09 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS