首页 > 其他分享> 文章详细

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

2020-09-14 14:00:52 阅读：308 来源： 互联网

标签：img URL text json createObjectURL video file var

前天有个需求，上传前需要校验视频长度，然后让我出个 Demo。其实预览功能实现上都差不多，所以今天我们都来实现一下咯。

选择文件

一般来说上传常见的操作就三种，单击、拖拽、粘贴。下面我们分别来说一下。

input 选择文件

我们无法获取用户本地的内容，需要通过 <input> 标签，让用户自己选取。

但是 <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" 是用来捕获拖拽移出

粘贴文件

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

广州vi设计公司 http://www.maiqicn.com 我的007办公资源网 https://www.wode007.com

解析文件

音频&视频

通过 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.js
pdf 有对应库 pdf.js

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

标签：img,URL,text,json,createObjectURL,video,file,var
来源： https://www.cnblogs.com/xiaonian8/p/13666305.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9