详解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访问ActiveX对象,以操作Access数据库为例。
Dec 15 NodeJs
nodejs npm install全局安装和本地安装的区别
Jun 05 NodeJs
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
Jul 15 NodeJs
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
Jul 26 NodeJs
nodejs的HTML分析利器node-jquery用法浅析
Nov 08 NodeJs
浅谈Nodejs中的作用域问题
Dec 26 NodeJs
详解nodeJS之路径PATH模块
May 31 NodeJs
使用Nodejs连接mongodb数据库的实现代码
Aug 21 NodeJs
Windows下使用Nodejs运行js的方法
Sep 02 NodeJs
nodejs取得当前执行路径的方法
May 13 NodeJs
nodejs初始化init的示例代码
Oct 10 NodeJs
nodejs如何在package.json中设置多条启动命令
Mar 16 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
js文件Cookie存取值示例代码
2014/02/20 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
利用python代码写的12306订票代码
2015/12/20 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
python几种常用功能实现代码实例
2019/12/25 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
python Gabor滤波器讲解
2020/10/26 Python
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
高级电工工作职责
2013/11/21 职场文书
小学生新学期寄语
2014/01/19 职场文书
书法比赛获奖感言
2014/02/10 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android