图片上传之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 05 NodeJs
Nodejs极简入门教程(二):定时器
Oct 25 NodeJs
NodeJS的Promise的用法解析
May 05 NodeJs
搭建简单的nodejs http服务器详解
Mar 09 NodeJs
详解使用nodeJs安装Vue-cli
May 17 NodeJs
Nodejs进阶之服务端字符编解码和乱码处理
Sep 04 NodeJs
nodejs socket服务端和客户端简单通信功能
Sep 14 NodeJs
详解使用vscode+es6写nodejs服务端调试配置
Sep 21 NodeJs
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
Mar 02 NodeJs
nodejs脚本centos开机启动实操方法
Mar 04 NodeJs
用Nodejs实现在终端中炒股的实现
Oct 18 NodeJs
nodejs中使用worker_threads来创建新的线程的方法
Jan 22 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和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
利用js对象弹出一个层
2008/03/26 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python 多线程的实例详解
2017/09/07 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
优秀学生评语大全
2014/04/25 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
岗位明星事迹材料
2014/05/18 职场文书
预备党员综合考察材料
2014/05/31 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
期末复习计划
2015/01/19 职场文书
个人培训总结
2015/03/05 职场文书
python实现简单的三子棋游戏
2022/04/28 Python