1. 程式人生 > >如何下載後臺介面返回給我們的二進位制資料檔案(vue +axios)

如何下載後臺介面返回給我們的二進位制資料檔案(vue +axios)

1.有時候,前端頁面上需要展示後臺介面返回給我們的一個二進位制檔案,比如圖片,那麼我們應該如何下載呢

js中有個Blob物件,一個 Blob物件表示一個不可變的, 原始資料的類似檔案物件。Blob表示的資料不一定是一個JavaScript原生格式 blob物件本質上是js中的一個物件,裡面可以儲存大量的二進位制編碼格式的資料。

2.建立Blob 物件

var debug = {hello: "world"};

var blob = new Blob(['後臺返回的二進位制檔案'],{type : '該檔案是什麼型別的檔案(MIME)'});

3.常用的檔案型別有(MIME),根據需要返回怎樣的檔案,就填寫怎樣的MIME型別,也可以不寫,寫的話指定了下載的檔案格式,不寫,檔案是什麼格式,下載就是什麼格式,根據專案需求.

字尾名       MIME名稱
*.3gpp    audio/3gpp, video/3gpp
*.ac3    audio/ac3
*.asf       allpication/vnd.ms-asf
*.au           audio/basic
*.css           text/css
*.csv           text/csv
*.doc    application/msword    
*.dot    application/msword    
*.dtd    application/xml-dtd    
*.dwg    image/vnd.dwg    
*.dxf      image/vnd.dxf
*.gif            image/gif    
*.htm    text/html    
*.html    text/html    
*.jp2            image/jp2    
*.jpe       image/jpeg
*.jpeg    image/jpeg
*.jpg          image/jpeg    
*.js       text/javascript, application/javascript    
*.json    application/json    
*.mp2    audio/mpeg, video/mpeg    
*.mp3    audio/mpeg    
*.mp4    audio/mp4, video/mp4    
*.mpeg    video/mpeg    
*.mpg    video/mpeg    
*.mpp    application/vnd.ms-project    
*.ogg    application/ogg, audio/ogg    
*.pdf    application/pdf    
*.png    image/png    
*.pot    application/vnd.ms-powerpoint    
*.pps    application/vnd.ms-powerpoint    
*.ppt    application/vnd.ms-powerpoint    
*.rtf            application/rtf, text/rtf    
*.svf           image/vnd.svf    
*.tif         image/tiff    
*.tiff       image/tiff    
*.txt           text/plain    
*.wdb    application/vnd.ms-works    
*.wps    application/vnd.ms-works    
*.xhtml    application/xhtml+xml    
*.xlc      application/vnd.ms-excel    
*.xlm    application/vnd.ms-excel    
*.xls           application/vnd.ms-excel    
*.xlt      application/vnd.ms-excel    
*.xlw      application/vnd.ms-excel    
*.xml    text/xml, application/xml    
*.zip            aplication/zip    

*.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

4.執行下載操作

這種寫法,有個缺點,就是上面註釋說的問題,當用戶上傳了一個檔案到目標伺服器上,你要下載這個檔案,而這個時候管理員同時在後臺把你這個檔案刪了,結果就是點選下載連結沒有反應,或者報錯,望讀者試情況而定,可以考慮讓後臺寫個介面,在呼叫下載連結之前首先呼叫這個介面判斷檔案是否存在,下面給大家看看,加了這個   responseType:"blob" 後,後臺返回的是個什麼,如果不加,則下載的檔案會出現亂碼

加了後,你會發現,data中沒有狀態碼返回了,也就是不能通過狀態碼來驗證使用者是否登入,介面是否請求成功等,所以在用該種方式下載後臺返回給我們的二進位制檔案的時候,需要考慮到這些問題,適當的應用,也希望所有各位大佬,能夠提供給小弟一個比較完善的方法,謝謝