JS中URL.createObjectURL使用示例讲解

什么是URL.createObjectURL？

在JavaScript中，URL.createObjectURL() 是一种方便的方法，可以将 Blob 或 文件对象转换为一个URL字符串，用于引用和使用。

URL.createObjectURL的语法

objectURL = URL.createObjectURL(blob);

参数:

• blob：一个Blob对象或者 File 对象

返回值：

• objectURL：一个基于blob的URL字符串

示例1：将文件转换成URL

<input type="file" id="fileInput" onchange="handleFile(this.files[0])">
<script>
function handleFile(file) {
  const fileURL = URL.createObjectURL(file);
  console.log(fileURL); // 输出blob:http://localhost:8080/1558b80d-41b0-4391-a34d-a9d8723c7f03
  // 在需要使用文件的地方
  const img = document.createElement('img');
  img.src = fileURL;
  document.body.appendChild(img); // 以img的方式展示文件
}
</script>

示例2：将Blob转换成URL

const blob = new Blob(['hello world'], { type: 'text/plain' });
const blobURL = URL.createObjectURL(blob);
console.log(blobURL); // 输出blob:http://localhost:8080/a69c7f6e-d3d7-4425-9f26-65d33f3f6f8e

// 在需要使用 Blob 数据的地方
const xhr = new XMLHttpRequest();
xhr.open('GET', blobURL, true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // 输出hello world
  }
};
xhr.send(null);

以上两个示例中，我们可以看到URL.createObjectURL()的用法。使用这种方式可以方便地创建URL字符串，从而对Blob或File对象进行引用和使用。需要注意的是，URL.createObjectURL() 返回的URL字符串在使用完毕后，我们需要及时调用URL.revokeObjectURL方法来释放资源，防止内存泄漏。