欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解JavaScript如何生成臨時(shí)鏈接

 更新時(shí)間：2024年02月15日 08:48:50   作者：sorryhc  
這篇文章主要為大家詳細(xì)介紹了JavaScript如何生成臨時(shí)鏈接的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下

前言

前端基于文件上傳需要有生成臨時(shí)可訪問鏈接的能力，我們可以通過URL.createObjectURL和FileReader.readAsDataURAPI來實(shí)現(xiàn)。

URL.createObjectURL()

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

1. 語法

let objectURL = URL.createObjectURL(object);

2. 參數(shù)

用于創(chuàng)建 URL 的 File 對象、Blob 對象或者 MediaSource 對象。

3. 返回值

一個(gè)DOMString包含了一個(gè)對象URL，該URL可用于指定源 object的內(nèi)容。

4. 示例

<input type="file" id="file">

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()

在每次調(diào)用 createObjectURL() 方法時(shí)，都會(huì)創(chuàng)建一個(gè)新的 URL 對象，即使你已經(jīng)用相同的對象作為參數(shù)創(chuàng)建過。當(dāng)不再需要這些 URL 對象時(shí)，每個(gè)對象必須通過調(diào)用 URL.revokeObjectURL() 方法來釋放。

瀏覽器在 document 卸載的時(shí)候，會(huì)自動(dòng)釋放它們，但是為了獲得最佳性能和內(nèi)存使用狀況，你應(yīng)該在安全的時(shí)機(jī)主動(dòng)釋放掉它們。

1. 語法

window.URL.revokeObjectURL(objectURL);

2. 參數(shù) objectURL

一個(gè) DOMString，表示通過調(diào)用 URL.createObjectURL() 方法返回的 URL 對象。

3. 返回值

undefined

4. 示例

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


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)區(qū)別

1. 主要區(qū)別

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

2. 執(zhí)行時(shí)機(jī)

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

3. 內(nèi)存使用

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

4. 優(yōu)劣對比

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

到此這篇關(guān)于詳解JavaScript如何生成臨時(shí)鏈接的文章就介紹到這了,更多相關(guān)JavaScript生成臨時(shí)鏈接內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論