angular.js+node.js實(shí)現(xiàn)下載圖片處理詳解
前言
本文主要介紹的是angular.js+node.js實(shí)現(xiàn)下載圖片處理,下載有兩種方式,下面話不多說(shuō),來(lái)看看詳細(xì)的介紹吧。
第一種:
不指定完整路徑,然后發(fā)送get給server讓server自己去拼接路徑,然后用express的res.download來(lái)做下載:
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和用戶之間僅僅發(fā)送文件名,然后瀏覽器端構(gòu)造一個(gè)restapi 接口 比如/api/download/xxxxx.png,server自己去找到完整的路徑然后發(fā)送給用戶。
第二種方式:
是不寫server代碼,而是通過express的static靜態(tài)文件機(jī)制,來(lái)發(fā)送文件給用戶
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開啟靜態(tài)文件了,那么需要構(gòu)造完整的相對(duì)路徑, 比如當(dāng)前網(wǎng)頁(yè)的url是/orc, 那么,只要構(gòu)造url為uploads/xxx.png,那么express會(huì)有轉(zhuǎn)到/data/ocr_img/dev/xxx.png,把文件發(fā)送回來(lái)。
這里要注意:就是圖片發(fā)送回來(lái)的時(shí)候,server默認(rèn)是使用的text/plain方式,而圖片需要的是二進(jìn)制。因此設(shè)置{responseType: 'arraybuffer'}
,同時(shí)在收到blob數(shù)據(jù)的時(shí)候指定type為new Blob([data], { "type" : "image/png" }
,這種type也適用于其他圖片類型比如pdf jpg bmp tiff等。
圖片下載其實(shí)就是二進(jìn)制文件的下載了,具體參考MDN的一個(gè)權(quán)威文檔:
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
再擴(kuò)展就是這個(gè)文檔了:
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
AngularJS數(shù)據(jù)源的多種獲取方式匯總
在AngularJS中獲取數(shù)據(jù)源的方式有很多種,本文給大家整理幾種獲取數(shù)據(jù)源的方式,對(duì)angularjs獲取數(shù)據(jù)源的方式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-02-02利用Angular2 + Ionic3開發(fā)IOS應(yīng)用實(shí)例教程
這篇文章主要給大家介紹了關(guān)于利用Angular2 + Ionic3開發(fā)IOS應(yīng)用的相關(guān)資料,文中通過示例代碼和圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01使用AngularJS編寫多選按鈕選中時(shí)觸發(fā)指定方法的指令代碼詳解
最近做項(xiàng)目時(shí)遇到了需要用到多選按鈕選中觸發(fā)事件的功能,小編試著手寫一個(gè)指令,具體實(shí)現(xiàn)代碼大家參考下本文吧2017-07-07AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色效果
這篇文章給大家介紹了如何利用AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色的效果,文中提供了實(shí)例代碼,對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值,下面來(lái)一起看看吧。2016-09-09使用AngularJS和PHP的Laravel實(shí)現(xiàn)單頁(yè)評(píng)論的方法
這篇文章主要介紹了使用AngularJS和PHP的Laravel實(shí)現(xiàn)單頁(yè)評(píng)論的方法,本文的示例是前端JavaScript和后端PHP聯(lián)合編程的典范,需要的朋友可以參考下2015-06-06詳解使用KeyValueDiffers檢測(cè)Angular對(duì)象的變化
這篇文章主要為大家介紹了KeyValueDiffers檢測(cè)Angular對(duì)象的變化使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04AngularJs1.x自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法
今天小編就為大家分享一篇AngularJs1.x自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-10-10分享Angular http interceptors 攔截器使用(推薦)
AngularJS 是一個(gè) JavaScript 框架。它可通過 <script> 標(biāo)簽添加到 HTML 頁(yè)面。這篇文章主要介紹了分享Angular http interceptors 攔截器使用(推薦),需要的朋友可以參考下2019-11-11