今天小编跟大家讲解下有关前端上传前预览文件 image、text、json、video、audio ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关前端上传前预览文件 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)}其他类型excel 有对应库js-xlsx.jspdf 有对应库pdf.js有需求再说吧 目前的应该也满足业务要求了。
微信公众号：前端linong来源：爱蒂网