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 相关文章推荐
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
JS实现密码框效果
Sep 10 Javascript
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
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
javascript动画浅析
2012/08/30 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
药店主任岗位责任制
2014/02/10 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
个人优缺点总结
2015/02/28 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python