使用JavaScriptobjectURLs，可以处理图像、音频和视频

许多Web应用程序需要在前端处理文件输入，或者将文件上传到后端。

在这篇文章中，我们来看看如何使用object URL来引用可以使用DOM文件对象引用的数据。

使用object URLs

我们可以调用 URL.createObjectURL 来从文件对象中创建一个URL字符串对象，方法如下。

 
 
 
 

  
  
  
  
const objectURL = window.URL.createObjectURL(fileObj); 
 
 
 
 

然后，我们可以在URL字符串对象上调用 revokeURL 以从内存中释放URL资源：

 
 
 
 

  
  
  
  
URL.revokeObjectURL(objectURL); 
 
 
 
 

使用object URLs 显示图片

例如，我们可以使用 createObjectURL 方法在 img 元素中显示选定的图像文件，如下所示。

首先，我们编写以下HTML：

然后，我们可以编写以下代码来侦听文件输入的change事件，然后使用 createObjectURL 设置 img 元素的 src 属性，如下所示：

 
 
 
 

  
  
  
  
const fileInput = document.querySelector('input'); 
  
  
  
  
const img = document.querySelector('img'); 
  
  
  
  
fileInput.onchange = () => { 
  
  
  
  
  const file = fileInput.files[0]; 
  
  
  
  
  img.src = URL.createObjectURL(file); 
  
  
  
  
  img.onload = () => { 
  
  
  
  
    URL.revokeObjectURL(img.src); 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

在上面的代码中，我们在选定的文件对象 file 上调用了 createObjectURL 来创建可以设置为 src 属性值的URL。然后，在加载图像时，我们调用 revokeObjectURL 清除用于创建URL的资源。

使用object URLs 显示PDF

我们还可以使用object URL来显示PDF。我们使用相同的 crateObjectURL 方法，但将其设置为 iframe 的URL而不是img元素。

例如，我们可以编写以下HTML：