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中删除元素的实现代码
Dec 29 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
JS实现横向跑马灯效果代码
Apr 20 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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
简单上手Python中装饰器的使用
2015/07/12 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
教师个人鉴定材料
2014/02/08 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
校园安全演讲稿
2014/05/09 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
期末考试复习计划
2015/01/19 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
比较node.js和Deno
2021/04/27 Javascript
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis