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文件缓存的代码
Apr 09 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
原生JS运动实现轮播图
Jan 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 cookie 登录验证示例代码
2009/03/16 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
Javascript中的 “&” 和 “|” 详解
2017/02/02 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
express.js中间件说明详解
2019/03/19 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
使用PYTHON接收多播数据的代码
2012/03/01 Python
python format 格式化输出方法
2018/07/16 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
如何开发安全的AJAX应用
2014/03/26 面试题
文职个人求职信范文
2013/09/23 职场文书
创伤外科专业推荐信范文
2013/11/19 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
党员公开承诺书
2014/03/25 职场文书
代理人委托书
2014/08/01 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
python+opencv实现目标跟踪过程
2022/06/21 Python