上传前前端预览文件图片、文本、json、视频、音频

前天有个要求。上传前需要检查视频的长度，然后让我做一个演示。预览文件demo在预览功能的实现上其实也是类似的，所以今天就来实现一下。一般来说，上传文件的常用操作有点击、拖动、粘贴三种。我们分开说吧。inputselectionfile我们获取不到用户本地的内容，需要使用标签让用户自己选择。但是标签有个缺点：不能自定义样式（效果很奇怪）。这里我们使用关联标签（label的for和input的id需要相同），这样点击效果和点击是一样的，标签可以任意修改。在拖放文件之前，在文件上传中提到过。@drop.prevent用于捕获结果。@dragover.prevent="dragover=true"用于捕获拖放@dragleave.prevent="dragover=false"用于捕获拖放并移出粘贴的文件。之前在文件上传中提到过。不过这种场景一般在富文本编辑器中比较常见（比如四福的编辑器，粘贴图片会上传），这里先不说了。通过URL.createObjectURL解析文件音视频生成可访问的URL。然后通过音视频解析这个资源，需要在onloadedmetadata回调中获取。varfile=el.files[0];varvideo=document.createElement('video');video.src=URL.createObjectURL(file);video.onloadedmetadata=function(){console.log('length',video.duration,'s')}图像通过URL.createObjectURL生成可访问的URL。然后通过img解析这个资源，需要在onload回调中获取。varfile=el.files[0];varimg=document.createElement('img');img.src=URL.createObjectURL(file);img.onload=function(){console.log('宽高',img.naturalWidth,img.naturalHeight)}文本可以直接用FileReader读取。varfileReader=newFileReader();fileReader.readAsText(file)fileReader.onload=()=>{console.log(fileReader.result)}其他类型的excel有对应的库js-xlsx.jspdf有对应的库pdf.js说说需求吧，目前的应该也能满足业务需求。更新时间：2021-06-17IE10不支持拖拽，只是屏蔽了所有事件的默认事件（我没有为dragenter添加这个事件），避免打开资源的问题。微信公众号：前端立农欢迎大家关注我的公众号。有问题也可以加我的微信前端交流群。