图片上传之FileAPI与NodeJs


Posted in NodeJs onJanuary 24, 2017

HTML5之fileAPI

HTML5之fileAPI使得我们处理图片上传更加简单。

实例

html代码

<div class="form-group">
  <label for="modal_inputFile" class="col-md-3 control-label label-font">位置图:</label>
  <div class="col-md-9">
   <input type="text" readonly="" class="form-control" placeholder="点击选择文件">
   <input type="file" id="modal_inputFile">
   <img src="" class="img-responsive" id="modal-pre" alt="预览区" style="max-height: 300px">
  </div>
</div>

效果:

图片上传之FileAPI与NodeJs

这里我们可以通过$("#modal_inputFile")[0].files[0]来获取到图片的信息。

图片上传之FileAPI与NodeJs

这里有name,size,type这几个我们常用的属性。

实现预览

选择好图片后,我们都希望会有个预览功能。这个html5也为我们想到了。

他提供了FileReader这个新的对象给我们。

FileReader该接口主要用来把文件读入内存,并且读取文件中的数据。

这样我们就可以通过date url来实现预览了。

var file = document.getElementById(modal_inputFile'').files[0];
 if (!file) {
 return false;
 }
 var reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = function(e) {
 var ib_pre = document.getElementById('modal-pre');
 ib_pre.src = this.result;
}

这样就实现了预览。

图片上传之FileAPI与NodeJs

我们再来查看下img的src。

<img src="data:image/png;base64,iVBORXXXXXXXXXXXXX....XXXXXXX" class="img-responsive" id="modal-pre" alt="预览区" style="max-height: 300px">

src是base64编码。

与后台对接

既然前端使用文件API能满足我们的需求,那我们接下来就需要上传到服务端了。当仁不让的就是NodeJs了。

前端请求

下面是前端发起请求的例子:

//图片上传
$('#preUpload').on('click', function(e) {
 var data = new FormData();
 var _files = $("#modal_inputFile")[0].files[0];
 var ect = ($("#modal_inputFile")[0].files[0]).name.split('.')[1];
 if(ect !== 'png'){
  alert('请上传png图片!')
  return;
 }
 data.append("modal_file", _files);
 $.ajax({
  type: 'post',
  dataType: 'json',
  url: window.stnt_hosts + 'thirdAdmanage/upload/modal',
  data: data,
  contentType: false,
  processData: false
 }).done(function(data, status) {
  console.log('上传成功');
 }).fail(function(err) {
  console.log('上传失败');
 })
})

这里通过FormData来处理我们需要上传的数据。

这里的data数据是一个序列过的对象。后台接受就行了。

后端处理

服务端我们使用node-formidable来处理图片的保存等操作。

见代码:

var formidable = require("formidable");
var form = new formidable.IncomingForm();
//临时目录
form.uploadDir = './upload/';
//预览图片上传
router.post('/upload/modal', function(req, res, next) {
 form.parse(req, function(err, fields, files) {
  if (files.modal_file) {
   rename(files.modal_file.path, files.modal_file.name, 'preview')
   res.send({
    stats:'success',
    data:[]
   })
  }
 })
});
function rename(old, _new, code, bId) {
 var path = './upload/' + code + '/';
  fs.exists(path, function(exists) {
   if (!exists) {
    fs.mkdir(path)
    console.log('创建文件夹!')
   }
   fs.renameSync(old, path + _new, function(err) {
    if (err) {
     console.log(err);
     return;
    }
    console.log('上传成功!')
   })
  })
}

这里使用fs.renameSync的原因是,我们里面设置的临时目录form.uploadDir是存在于内存中的数据,并不是真正的图片。

类似这样

图片上传之FileAPI与NodeJs

我们需要通过fs的方法,将文件重新保存到我们需要的地方即可。这时候就是图片了。

最后

这里的form.parse(req, function(err, fields, files)中的fields与files到底是什么对象,一定要自己调试着看。看完你就明白是什么了。

之前我不清楚的时候就是打开浏览器就搜索,结果可想而知很惨,几乎全是错的。

所以不清楚的话一定要去查github。

还有app.use(bodyParser.urlencoded({ extended: true }));的作用是用来解析我们通常的form表单提交的数据,也就是请求头中包含这样的信息: Content-Type: application/x-www-form-urlencoded

app.use(bodyParser.json())是用来解析json的。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

NodeJs 相关文章推荐
Nodejs中自定义事件实例
Jun 20 NodeJs
在windows上用nodejs搭建静态文件服务器的简单方法
Aug 11 NodeJs
nodejs连接mongodb数据库实现增删改查
Dec 01 NodeJs
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
Dec 30 NodeJs
实例分析nodejs模块xml2js解析xml过程中遇到的坑
Mar 18 NodeJs
nodejs密码加密中生成随机数的实例代码
Jul 17 NodeJs
Nodejs实现文件上传的示例代码
Sep 26 NodeJs
Nodejs下使用gm圆形裁剪并合成图片的示例
Feb 22 NodeJs
NodeJS父进程与子进程资源共享原理与实现方法
Mar 16 NodeJs
nodejs图片处理工具gm用法小结
Dec 12 NodeJs
nodejs微信开发之接入指南
Mar 17 NodeJs
Nodejs + sequelize 实现增删改查操作
Nov 07 NodeJs
初探nodeJS
Jan 24 #NodeJs
进阶之初探nodeJS
Jan 24 #NodeJs
用nodejs搭建websocket服务器
Jan 23 #NodeJs
NodeJS遍历文件生产文件列表功能示例
Jan 22 #NodeJs
nodejs实现发出蜂鸣声音(系统报警声)的方法
Jan 18 #NodeJs
nodejs的压缩文件模块archiver用法示例
Jan 18 #NodeJs
nodejs 实现钉钉ISV接入的加密解密方法
Jan 16 #NodeJs
You might like
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
window.open不被拦截的实现代码
2012/08/22 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
webpack配置之后端渲染详解
2017/10/26 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
应届生法律求职信
2013/10/22 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
政风行风建设整改方案
2014/10/27 职场文书
行政经理岗位职责
2015/04/15 职场文书
特此通知格式
2015/04/27 职场文书
聘任书范文大全
2015/09/21 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
React中的Context应用场景分析
2021/06/11 Javascript