image.png
1. ObjectURL 是什么?
ObjectURL 是用于引用任何數(shù)據(jù)的簡單URL字符串，即用一個URL來訪問某個數(shù)據(jù)資源。比如可以創(chuàng)建某個圖片的 ObjectURL 值，然后設(shè)置該值為圖片標簽的 src，即可展示該圖片。ObjectURL 本質(zhì)上是一個臨時的，用于訪問某個資源的路徑。它常常用來展示文件，比如圖片、Excel、PDF文件、視頻文件等。
2. 使用 URL.createObjectURL(File|Blob)
- window.URL.createObjectURL 用于創(chuàng)建 ObjectURL；
- 在每次調(diào)用 createObjectURL() 方法時，都會創(chuàng)建一個新的 URL 對象，即使你已經(jīng)用相同的對象作為參數(shù)創(chuàng)建過。當不再需要這些 URL 對象時，每個對象必須通過調(diào)用 URL.revokeObjectURL() 方法來釋放；
- 瀏覽器在 document 卸載的時候，會自動釋放它們，但是為了獲得最佳性能和內(nèi)存使用狀況，你應該在安全的時機主動釋放掉它們；
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://c1.airtlab.com/6B25344A-A3BE-4FEF-B2C1-C61230EBBA38.jpeg',
method: 'GET',
responseType: 'blob'
}).then(res => {
// res.data 是一個 Blob 對象
// 使用 URL.createObjectURL 來創(chuàng)建 ObjectURL
var dataURL = URL.createObjectURL(res.data);
})
</script>
// 銷毀
window.URL.revokeObjectURL(objectURL);
3. 使用 ObjectURL 展示圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ObjectURL</title>
</head>
<body>
<img src="" id="img">
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'https://c1.airtlab.com/6B25344A-A3BE-4FEF-B2C1-C61230EBBA38.jpeg',
method: 'GET',
responseType: 'blob'
}).then(res => {
// 使用 URL.createObjectURL 來創(chuàng)建 ObjectURL
var dataURL = URL.createObjectURL(res.data);
var img = document.querySelector("#img");
img.src = dataURL;
})
</script>
</html>
4. 使用 ObjectURL 顯示PDF
對象URL可以用于image之外的其它東西！它可以用于顯示嵌入的PDF文件或任何其它瀏覽器能顯示的資源：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-url</title>
<style type="text/css">
#viewer {
display: block;
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<iframe id="viewer" ></iframe>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: './test.pdf',
method: 'GET',
responseType: 'blob'
}).then(res => {
var blob = res.data;
const obj_url = window.URL.createObjectURL(blob);
const iframe = document.getElementById('viewer');
iframe.setAttribute('src', obj_url);
window.URL.revokeObjectURL(obj_url);
}).catch(err => {
console.log(err)
})
</script>
</html>
image.png
5. 使用 ObjectURL 用于其它文件類型
你可以用同樣方式操作其它格式的文件。這是預覽上傳的視頻的方法：
const video = document.getElementById('video');
const obj_url = window.URL.createObjectURL(blob);
video.src = obj_url;
video.play()
window.URL.revokeObjectURL(obj_url);
