运维开发网

使用 JavaScript Object URL,可以处理图像、音频和视频

运维开发网 https://www.qedev.com 2021-01-13 09:05 出处:51CTO 作者:mb5ff982de32716
来源:https://medium.com作者:John Au-Yeung许多Web应用程序需要在前端处理文件输入,或者将文件上传到后端。在这篇文章中,我们来看看如何使用Object URL来引用可以使用DOM文件对象引用的数据。使用object URLs我们可以调用 URL.createObjectURL 来从文件对象中创建一个URL字符串对象,方法如下。const objectURL = wi

使用 JavaScript Object URL,可以处理图像、音频和视频

来源:https://medium.com

作者:John Au-Yeung

许多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属性,以显示或播放它们。在大多数浏览器中,它都可以处理图像,音频和视频。


大礼包更新了!

新增慕课网实战课程《Webpack4.0从基础到实战 手把手带你掌握新版》,大礼包目前被屏蔽....。

单独获取该课程:

  • 链接: https://pan.baidu.com/s/1Uvf65FIl6ATEVW7QBnEX-A 

  • 提取码: ugik

使用 JavaScript Object URL,可以处理图像、音频和视频

公众号中回复“前端大礼包”五个字即可获取!拉勾教育还有一门Webpack课程,只要18元,可以看看哦。

扫码领视频副本.gif

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号