使用elementui上傳的時候獲取圖片地址


    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


免責聲明!

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



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