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 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
Vue.js特性Scoped Slots的浅析
Feb 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 移除数组重复元素的一点说明
2008/11/27 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
PHP面试题及答案一
2012/06/18 面试题
打架检讨书300字
2014/02/02 职场文书
安全生产目标责任书
2014/04/14 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
元旦主持词开场白
2015/05/29 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
python编写五子棋游戏
2021/05/25 Python
PHP 时间处理类Carbon
2022/05/20 PHP
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers