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