想要預覽文件或是圖片,將后端返回的信息轉換為前端可以正常顯示的格式


文件、圖片在后端主要以兩種方式存儲:

1.保存在服務器上,數據庫中存儲的是該文件、圖片的地址;

2.將文件、圖片轉為二進制流,數據庫中存儲的是對應的二進制流。

 

針對第一種情況的話,直接請求接口獲取到對應的URL地址,賦值給src即可。

第二種的話需要轉換一下,請求接口獲取的是二進制流,在控制台看到的會是一堆亂碼,由於responseType默認返回的是json數據,需要將它轉為blob對象,然后使用blob的API生成臨時的URL地址,來顯示對應的文件、圖片。

 

實現代碼:

1.在請求接口的時候加一句話:

responseType: 'blob',

 2.將返回的信息轉換為blob對象之后,生成臨時的URL地址:

this.src = URL.createObjectURL(res.data);
let binaryData = [];
binaryData.push(res.data);
this.src = window.URL.createObjectURL(new Blob(binaryData,{type:'application/pdf'}));

此時取得的變量src就是要預覽的文件、圖片的URL地址,就可以正常顯示了。

 

注意:

1.該實現代碼是針對第二種返回的情況,若是直接返回的URL地址,則不需要做這些操作,接口返回的值直接賦值給src就可以了。

2.文件、圖片本質上來說是一樣的,都是通過URL來訪問,預覽,下載。

3.responseType: 'blob',的添加位置:

 

參考鏈接:https://www.jianshu.com/p/12fea9987c2d


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM