image.png
1. ObjectURL 是什么?
ObjectURL 是用于引用任何数据的简单URL字符串，即用一个URL来访问某个数据资源。比如可以创建某个图片的 ObjectURL 值，然后设置该值为图片标签的 src，即可展示该图片。ObjectURL 本质上是一个临时的，用于访问某个资源的路径。它常常用来展示文件，比如图片、Excel、PDF文件、视频文件等。
2. 使用 URL.createObjectURL(File|Blob)
- window.URL.createObjectURL 用于创建 ObjectURL；
- 在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放；
- 浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们；
<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 来创建 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 来创建 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);
