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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
javascript中的继承实例代码
Apr 27 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 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 explode()函数用法、切分字符串
2012/10/03 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
构建Python包的五个简单准则简介
2015/06/15 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
python中partial()基础用法说明
2018/12/30 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
集团公司人力资源部岗位职责
2014/01/03 职场文书
元旦联欢会主持词
2014/03/26 职场文书
事业单位个人总结
2015/02/12 职场文书
求职自荐信怎么写
2015/03/04 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
保留意见审计报告
2015/06/05 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP