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

URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似，下面是個(gè)人的一些理解，如有不正確的地方，歡迎指出：

主要區(qū)別

通過(guò)FileReader.readAsDataURL(file)可以獲取一段data:base64的字符串
通過(guò)URL.createObjectURL(blob)可以獲取當(dāng)前文件的一個(gè)內(nèi)存URL

執(zhí)行時(shí)機(jī)：

createObjectURL是同步執(zhí)行（立即的）
FileReader.readAsDataURL是異步執(zhí)行（過(guò)一段時(shí)間）

內(nèi)存使用：

createObjectURL返回一段帶hash的url，并且一直存儲(chǔ)在內(nèi)存中，直到document觸發(fā)了unload事件（例如：document close）或者執(zhí)行revokeObjectURL來(lái)釋放。
FileReader.readAsDataURL則返回包含很多字符的base64，并會(huì)比blob url消耗更多內(nèi)存，但是在不用的時(shí)候會(huì)自動(dòng)從內(nèi)存中清除（通過(guò)垃圾回收機(jī)制）

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

優(yōu)劣對(duì)比：

使用createObjectURL可以節(jié)省性能并更快速，只不過(guò)需要在不使用的情況下手動(dòng)釋放內(nèi)存
如果不太在意設(shè)備性能問(wèn)題，并想獲取圖片的base64，則推薦使用FileReader.readAsDataURL

使用方式：

objectURL = URL.createObjectURL(blob);

示例

html 文件

<input type="file" id="btn" accept="image/*" value="點(diǎn)擊上傳" />
<img id="img"/>

js 文件

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

到此這篇關(guān)于關(guān)于URL.createObjectURL()的使用方法的文章就介紹到這了,更多相關(guān)URL.createObjectURL()用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: