详解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学习小结(一)
Jul 06 NodeJs
Nodejs Stream 数据流使用手册
Apr 17 NodeJs
NodeJs下的测试框架Mocha的简单介绍
Feb 22 NodeJs
nodejs搭建本地http服务器教程
Mar 13 NodeJs
详解HTTPS 的原理和 NodeJS 的实现
Jul 04 NodeJs
nodejs动态创建二维码的方法
Aug 12 NodeJs
nodejs使用redis作为缓存介质实现的封装缓存类示例
Feb 07 NodeJs
nodejs用gulp管理前端文件方法
Jun 24 NodeJs
Nodejs Express 通过log4js写日志到Logstash(ELK)
Aug 30 NodeJs
NodeJS 文件夹拷贝以及删除功能
Sep 03 NodeJs
nodejs环境使用Typeorm连接查询Oracle数据
Dec 05 NodeJs
nodejs利用readline提示输入内容实例代码
Jul 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
ftp类(example.php)
2006/10/09 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python关键字and和or用法实例
2015/05/28 Python
Python中list初始化方法示例
2016/09/18 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
银行工作检查书范文
2014/01/31 职场文书
工会换届选举方案
2014/05/21 职场文书
小学学校评估方案
2014/06/08 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
中标通知书范本
2015/04/17 职场文书
Python 中random 库的详细使用
2021/06/03 Python
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android