前天有个需求,上传前需要校验视频长度,然后让我出个 Demo。
其实预览功能实现上都差不多,所以今天我们都来实现一下咯。
一般来说上传常见的操作就三种,单击、拖拽、粘贴。下面我们分别来说一下。
我们无法获取用户本地的内容,需要通过 <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) }
js-xlsx.js
pdf.js
有需求再说吧,目前的应该也满足业务要求了。
欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。