前端上传前预览文件 image、text、json、video、audio

前天有个需求，上传前须要校验视频长度，而后让我出个 Demo。

其实预览功能实现上都差很少，因此今天咱们都来实现一下咯。

选择文件

通常来讲上传常见的操做就三种，单击、拖拽、粘贴。下面咱们分别来讲一下。

input 选择文件

咱们没法获取用户本地的内容，须要经过 <input> 标签，让用户本身选取。

<input type="file" name="input" id="input" @change="inputHandler">

可是 <input> 标签有个弊端：样式没法自定义（效果很奇怪）。

咱们这里经过 <label for="input"> 来和 <input id="input"> 标签关联（label 的 for 和 input 的 id 须要同样）起来，这样单击 <label> 和单击 <input> 的效果是同样的，并且 <label> 标签能够任意修改。

拖拽文件

以前有在文件上传中讲过。

<label for="input" class="upload-wrap" 
    :class="{'upload-wrap--hover': dragover}"
    @drop.prevent="onDrop"
    @dragover.prevent="dragover = true"
    @dragleave.prevent="dragover = false">

@drop.prevent 是用来捕获结果的。
@dragover.prevent="dragover = true" 是用来捕获拖拽移入
@dragleave.prevent="dragover = false" 是用来捕获拖拽移出

粘贴文件

以前有在文件上传中讲过。

不过这个场景通常在富文本编辑器中比较常见（好比思否的编辑器，粘贴过来图片会上传），我们这里不就讲了。

解析文件

音频&视频

经过 URL.createObjectURL 生成一个可访问的地址。
而后经过 audio、video 解析这个资源，须要在 onloadedmetadata 回调里面再获取。

var file = el.files[0];
var video = document.createElement('video');
video.src = URL.createObjectURL(file);
video.onloadedmetadata = function(){
    console.log('长度', video.duration, 's')
}

图片

经过 URL.createObjectURL 生成一个可访问的地址。
而后经过 img 解析这个资源，须要在 onload 回调里面再获取。

var file = el.files[0];
var img = document.createElement('img');
img.src = URL.createObjectURL(file);
img.onload = function(){
    console.log('宽高', img.naturalWidth, img.naturalHeight)
}

文本

文本的话直接用 FileReader 就能读取。

var fileReader = new FileReader();
fileReader.readAsText(file)
fileReader.onload = () => {
    console.log(fileReader.result)
}

其余类型

1. excel 有对应库 js-xlsx.js
2. pdf 有对应库 pdf.js

有需求再说吧，目前的应该也知足业务要求了。

微信公众号：前端linong

欢迎你们关注个人公众号。有疑问也能够加个人微信前端交流群。