URL.createObjectURL()的使用方法

URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。

URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似：

區別

• 通過FileReader.readAsDataURL(file)可以獲取一段data:base64的字符串
• 通過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

使用方式：

objectURL = URL.createObjectURL(blob);

示例

<input type="file" id="btn" accept="image/*" value="點擊上傳" />
<img id="img"/>

  js.

btn.addEventListener('change',function(){
    let file = this.files[0];
    // 進一步防止文件類型錯誤
    if(!/image\/\w+/.test(file.type)){  
        alert("看清楚，這個需要圖片！");  
        return false;  
    }  
    img.src = URL.createObjectURL(file)
})

 

 

參考鏈接：https://blog.csdn.net/qq_39258552/article/details/84133770

參考鏈接：https://blog.csdn.net/baidu_38558076/article/details/80287689