文件、圖片在后端主要以兩種方式存儲:
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',的添加位置: