使用elementui上傳的時候獲取圖片地址
阿新 • • 發佈：2022-01-07
URL.createObjectURL() 靜態方法會建立一個 DOMString，其中包含一個表示引數中給出的物件的URL。這個 URL 的生命週期和建立它的視窗中的 document 繫結。這個新的URL 物件表示指定的 File 物件或 Blob 物件。
URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似，下面是個人的一些理解，如有不正確的地方，歡迎指出：
主要區別
通過FileReader.readAsDataURL(file)可以獲取一段data:base64的字串
this.image = URL.createObjectURL(file.raw);通過URL.createObjectURL(blob)可以獲取當前檔案的一個記憶體URL
執行時機：
createObjectURL是同步執行（立即的）
FileReader.readAsDataURL是非同步執行（過一段時間）
記憶體使用：
createObjectURL返回一段帶hash的url，並且一直儲存在記憶體中，直到document觸發了unload事件（例如：document close）或者執行revokeObjectURL來釋放。
FileReader.readAsDataURL則返回包含很多字元的base64，並會比blob url消耗更多記憶體，但是在不用的時候會自動從記憶體中清除（通過垃圾回收機制）
相容性方面兩個屬性都相容ie10以上的瀏覽器。
優劣對比：
使用createObjectURL可以節省效能並更快速，只不過需要在不使用的情況下手動釋放記憶體
如果不太在意裝置效能問題，並想獲取圖片的base64，則推薦使用FileReader.readAsDataURL