angular.js+node.js实现下载图片处理详解


Posted in Javascript onMarch 31, 2017

前言

本文主要介绍的是angular.js+node.js实现下载图片处理,下载有两种方式,下面话不多说,来看看详细的介绍吧。

第一种:

不指定完整路径,然后发送get给server让server自己去拼接路径,然后用express的res.download来做下载:

Express:

var filePath = path.join(savePath, file[0].name);
console.log('Download file: ' + filePath);
res.download(filePath);

angular:

$http.get(url).success(function (data) {
 var bin = new $window.Blob([data]);

 deferred.resolve(data);

 // Using file-saver library to handle saving work.
 saveAs(bin, toFilename);
})

这种适合于server和用户之间仅仅发送文件名,然后浏览器端构造一个restapi 接口 比如/api/download/xxxxx.png,server自己去找到完整的路径然后发送给用户。

第二种方式:

是不写server代码,而是通过express的static静态文件机制,来发送文件给用户

Express:

app.use('/ocr/uploads', express.static('/data/ocr_img/dev', { maxAge: 86400000 }));

Angular:

$http.get(url, {responseType: 'arraybuffer'}).success(function (data) {

 var bin = new Blob([data], { "type" : "image/png" });

 deferred.resolve({status: '200'});

 saveAs(bin, toFilename);
})

这种适合用户知道server开启静态文件了,那么需要构造完整的相对路径, 比如当前网页的url是/orc, 那么,只要构造url为uploads/xxx.png,那么express会有转到/data/ocr_img/dev/xxx.png,把文件发送回来。

这里要注意:就是图片发送回来的时候,server默认是使用的text/plain方式,而图片需要的是二进制。因此设置{responseType: 'arraybuffer'} ,同时在收到blob数据的时候指定type为new Blob([data],  { "type" : "image/png" } ,这种type也适用于其他图片类型比如pdf jpg bmp tiff等。

图片下载其实就是二进制文件的下载了,具体参考MDN的一个权威文档:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

再扩展就是这个文档了:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Receiving_binary_data

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
three.js实现3D视野缩放效果
Nov 16 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
JavaScript函数柯里化原理与用法分析
Mar 31 #Javascript
js实现一个猜数字游戏
Mar 31 #Javascript
微信小程序页面间通信的5种方式
Mar 31 #Javascript
ES6新特性之Symbol类型用法分析
Mar 31 #Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 #Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 #Javascript
ES6新特性之Object的变化分析
Mar 31 #Javascript
You might like
PHP4实际应用经验篇(3)
2006/10/09 PHP
调整PHP的性能
2013/10/30 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
摘自启点的main.js
2008/04/20 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python随机函数random()使用方法小结
2018/04/29 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
红旗方阵解说词
2014/02/12 职场文书
政风行风建设整改方案
2014/10/27 职场文书
党员年度个人总结
2015/02/14 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript