hugh 的个人博客

Everyday is a new day

利用createObjectURL读取本地文件内容

1. 场景

当我们选择一个音频或视频时, 为了预览操作, 直接使用vadio或audio播放,就会不行无法渲染的情况

2. 原因

本地文件系统无法被直接访问

3. 解决

URL.createObjectURL(object)

object

用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​

案例

 <video id="video1" width="220" :src="realFile" controls>

                        您的浏览器不支持 HTML5 video 标签。
                    </video>
 this.realFile = URL.createObjectURL(file);// file可以来源一个拖拽选择或者 文件选择框点击选择

在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。

URL.revokeObjectURL(this.realFile);// 手动释放

标题:利用createObjectURL读取本地文件内容
作者:hugh0524
地址:https://blog.uproject.cn/articles/2019/11/25/1574670880363.html

0 浏览