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

因为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 => {


#### css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解


![](https://img-blog.csdnimg.cn/img_convert/4a41eb04a93508840ac79760a98121b5.webp?x-oss-process=image/format,png)

#### js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？


![](https://img-blog.csdnimg.cn/img_convert/e0d20efd09772eac6420dffbb4d82689.webp?x-oss-process=image/format,png)

 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？


[外链图片转存中...(img-WG5NilCB-1719243154524)]