hugh 的个人博客

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);// 手动释放