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

前端实现图片或视频预览的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="control