前端实现图片或视频预览的3种方法

1. 通过上传服务器实现预览

上传服务器是早期经常使用的方法，主要思想就是先把图片视频资源，通过ajax请求上传到服务端，然后服务端返回一个视频路径，前端使用这个路径即可加载出资源并实现预览。

因为H5之前，前端是没办法操作文件的，此方法也是唯一可靠的资源预览方法。但确实有很多弊端：

1. 预览前必须先将资源上传至服务端，如果资源过大，导致上传时间过长，资源预览加载时间也过长，影响用户体验。
2. 如果用户只是想预览，并不上传，然而资源已经上传，这就造成内存空间以及网络资源的浪费。

2. 将资源转换为base64格式

H5之后，前端有了自己的file对象，终于可以自己操作文件。同时FileReader对象中的readAsDataURL 方法会读取指定的 Blob 或 File 对象，更是让我们可以实现纯前端的图片操作。
具体代码如下：

<input type="file" id="videoInput">
<video src="" alt="预览" id="video" controls="controls">
<script>
  const videoInput = document.getElementById('videoInput');
  videoInput.addEventListener('change', e => {
    previewByReader(e.target.files[0])
  })
  function previewByReader (file) {
    const fileReader = new FileReader()
    fileReader.readAsDataURL(file)
    fileReader.onload = (e) => {
      console.log(e.target)
      video.src = e.target.result
    }
  }
</script>

new一个FileReader实例，我们可以使用实例的readerAsDataURL方法读取某个文件，读取完成后通过监听onload事件，我们我们可以获取到读取的结果，一个FileReader对象，它的result属性就是我们想要的base64格式。

最终设置video元素的src实现预览：

当然前端转换base64的方法很多，也可以通过canvas或者其他前端插件来实现都是可以的。

通过blob协议实现预览

再base64实现预览中，我特意选择了一个较大的视频，实践过的同学可能也会发现，base64操作需要花费一定时间。如果资源足够大，将花费较长时间，影响用户体验，这就是体现blob协议优点的时候了。
先介绍用法：

<input type="file" id="videoInput">
  <video src="" alt="预览" id="video" controls="controls" width="400" height="200">
  <script>
    const videoInput = document.getElementById('videoInput');
    videoInput.addEventListener('change', e => {
      previewByURL(e.target.files[0])
    })
    function previewByURL (file) {
      video.src = URL.createObjectURL(file)
    }
  </script>

可以看到，blob主要是通过URL对象上的createObjectURL方法创建一个地址，直接设置给video.src即可，用法非常简单，仅需一行代码。接下来我们看下html重的video.src到底是什么：

可以看到，使用blob协议的一个url，这个 URL 临时缓存起来，一旦网页刷新或卸载，这个 URL 就失效。除此之外，也可以手动调用 URL.revokeObjectURL方法，使 URL 失效。

window.URL.revokeObjectURL(objectURL);