使用 JavaScript object URLs，可以处理图像、音频和视频

许多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：

<input type="file"  accept="image/*"> <img /> 

然后，可处我们可以编写以下代码来侦听文件输入的理图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：

<input type="file" > <iframe> 

然后，我们可以将 src 属性设置为PDF对象URL的iframe，如下所示：

const fileInput = document.querySelector(input); const iframe = document.querySelector(iframe); fileInput.onchange = () => {    const file = fileInput.files[0];   const objUrl = URL.createObjectURL(file);   iframe.setAttribute(src, objUrl);   URL.revokeObjectURL(objUrl); } 

我们使用 createObjectURL 和上传的PDF文件来创建Object URL字符串。然后我们可以为其设置 src 属性。然后，PDF将显示在Firefox的iframe中。

将 object URLs 与其他文件类型一起使用

Object URL也可以与其他文件类型一起使用。例如，我们可以选择一个视频文件并通过编写以下代码来播放它。首先，我们编写以下HTML代码：

<input type=file /> <video controls /> 

然后，要播放从文件输入中选择的服务器托管视频文件，我们编写：

const fileInput = document.querySelector(input); const video = document.querySelector(video); fileInput.onchange = async () => {    const file = fileInput.files[0];   const objUrl = URL.createObjectURL(file);   video.src = objUrl;   await video.play();   URL.revokeObjectURL(objUrl); } 

在上面的代码中，我们有一个异步函数，该函数从选定的视频文件创建Object URL。然后，将Object URL设置为video元素的src属性。

然后，我们调用视频 play 以播放视频。 play 方法返回一个Promise，因此我们必须添加一个 await 等待该Promise的解决。

完成此操作后，我们可以在Object URL上调用 revokeObjectURL 以释放资源。

总结

我们可以创建Object URL并将其设置为各种元素的src属性，以显示或播放它们。在大多数浏览器中，它都可以处理图像，音频和视频。