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

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

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

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

 

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

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

 

實現代碼：

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

responseType: 'blob',

 2.將返回的信息轉換爲blob對象之後，生成臨時的URL地址：

this.src = URL.createObjectURL(res.data);

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

 

注意：

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

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

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

 

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