JS中URL.createObjectURL使用範例講解

2022-03-05 13:00:13

前言

URL.createObjectURL() 靜態方法會建立一個 DOMString，其中包含一個表示引數中給出的物件的URL。這個 URL 的生命週期和建立它的視窗中的 document 繫結。這個新的URL 物件表示指定的 File 物件或 Blob 物件。

URL.createObjectURL()

語法

objectURL = URL.createObjectURL(object);

引數

用於建立 URL 的 File 物件、Blob 物件或者 MediaSource 物件。

返回值

一個DOMString包含了一個物件URL，該URL可用於指定源 object的內容。

範例

// html程式碼
<input type="file" id="file">

// js程式碼
document.querySelector('#file').onchange = function (e) {
  console.log(e.target.files[0])
  console.log(URL.createObjectURL(e.target.files[0]))
}

將上方console控制檯列印的blob檔案資源地址貼上到瀏覽器中

blob:http://localhost:8080/1ece2bb1-b426-4261-89e8-c3bec43a4020

URL.revokeObjectURL()

在每次呼叫 createObjectURL() 方法時，都會建立一個新的 URL 物件，即使你已經用相同的物件作為引數建立過。當不再需要這些 URL 物件時，每個物件必須通過呼叫 URL.revokeObjectURL() 方法來釋放。

瀏覽器在 document 解除安裝的時候，會自動釋放它們，但是為了獲得最佳效能和記憶體使用狀況，你應該在安全的時機主動釋放掉它們。

語法

window.URL.revokeObjectURL(objectURL);

引數 objectURL

一個 DOMString，表示通過呼叫 URL.createObjectURL() 方法返回的 URL 物件。

Return value

undefined

範例

// html程式碼
<input type="file" id="file">
<img id="img1" style="width: 200px;height: auto" />
<img id="img2" style="width: 200px;height: auto" />

// js程式碼
document.querySelector('#file').onchange = function (e) {
	const file = e.target.files[0]
	
	const URL1 = URL.createObjectURL(file)
	console.log(URL1)
	document.querySelector('#img1').src = URL1
	URL.revokeObjectURL(URL1)
	
	const URL2 = URL.createObjectURL(file)
	console.log(URL2)
	document.querySelector('#img2').src = URL2
}

與FileReader.readAsDataURL(file)區別

若對FileReader不瞭解，則可以翻看這篇文章

主要區別

通過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消耗更多記憶體，但是在不用的時候會自動從記憶體中清除（通過垃圾回收機制）