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

发布时间：2025-11-05 11:57:42 来源：云智核 作者：IT科技类资讯

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

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

使用object URLs

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

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

使用object URLs 显示图片

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

首先，使用视频我们编写以下HTML：

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

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

使用object URLs 显示PDF

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

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

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

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

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

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

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

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

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

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

总结

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

相关文章