JavaScript的URL.createObjectURL()怎么使用

這篇文章主要介紹“JavaScript的URL.createObjectURL()怎么使用”，在日常操作中，相信很多人在JavaScript的URL.createObjectURL()怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript的URL.createObjectURL()怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

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

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

主要區(qū)別

• 通過FileReader.readAsDataURL(file)可以獲取一段data:base64的字符串

• 通過URL.createObjectURL(blob)可以獲取當(dāng)前文件的一個內(nèi)存URL

執(zhí)行時機：

• createObjectURL是同步執(zhí)行（立即的）

• FileReader.readAsDataURL是異步執(zhí)行（過一段時間）

內(nèi)存使用：

• createObjectURL返回一段帶hash的url，并且一直存儲在內(nèi)存中，直到document觸發(fā)了unload事件（例如：document close）或者執(zhí)行revokeObjectURL來釋放。

• FileReader.readAsDataURL則返回包含很多字符的base64，并會比blob url消耗更多內(nèi)存，但是在不用的時候會自動從內(nèi)存中清除（通過垃圾回收機制）

兼容性方面兩個屬性都兼容ie10以上的瀏覽器。

優(yōu)劣對比：

• 使用createObjectURL可以節(jié)省性能并更快速，只不過需要在不使用的情況下手動釋放內(nèi)存

• 如果不太在意設(shè)備性能問題，并想獲取圖片的base64，則推薦使用FileReader.readAsDataURL

使用方式：

objectURL = URL.createObjectURL(blob);

示例

html 文件

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

js 文件

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

到此，關(guān)于“JavaScript的URL.createObjectURL()怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>