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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
如何编写jquery插件
Mar 29 jQuery
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP滚动日志的代码实现
2015/06/10 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
在Python的Django框架中创建和使用模版
2015/07/15 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
Python模块的加载讲解
2019/01/15 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
python实现拼图小游戏
2020/02/22 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
编辑求职信样本
2013/12/16 职场文书
药品采购员岗位职责
2014/02/08 职场文书
出纳员的岗位职责
2014/02/22 职场文书
四下基层实施方案
2014/03/28 职场文书
九九重阳节致辞
2015/07/31 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python