前端上传前预览文件 image、text、json、video、audio?
选择文件
一般来说上传常见的操作就三种,单击、拖拽、粘贴。下面我们分别来说一下。
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" 是用来捕获拖拽移出
粘贴文件
不过这个场景一般在富文本编辑器中比较常见(比如思否的编辑器,粘贴过来图片会上传),咱们这里不就讲了。
https://www.51220.cn 51220网站目录
解析文件
音频&视频
通过 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
有需求再说吧,目前的应该也满足业务要求了。
原文地址:https://www.cnblogs.com/Qooo/p/15066334.html
- React Native之轻量级存储AsyncStorage
- [先行者课程]--0312视差效果--课堂笔记
- Android 绿色应用公约
- React-Native组件之 TabBarIOS和TabBarIOS.Item
- [先行者周日课程-0305] web前端组件 之 拖动窗口
- react-native城市列表组件
- [前端常见病] 之 后端数据还没有,前端怎么进行?
- dependencies与devDependencies的区别
- [先行者课程] -- 用js实现倒计时功能的业务逻辑
- iOS如何实现多个环境一次打包
- 从原理到策略算法再到架构产品看推荐系统 | 附Spark实践案例
- MobX 在 React Native开发中的应用
- RCTEventEmitter使用
- Google V8 引擎
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- stat 命令家族(2)- 详解 pidstat
- MTO和MaTO MMZDT
- stat 命令家族(3)- 详解 mpstat
- 知识图谱入门(一)
- PHP判断变量内容是什么编码(gbk?utf-8) mb_detect_encoding
- stat 命令家族(4)- 详解 iostat
- PHP将数组存入数据库中的四种方式
- 序列化与json性能评测
- js内存泄漏常见的四种情况(From LeuisKen)
- 「R」Rprofile:R 全局设置
- Jmetal Problem和Problem Set的变量范围
- 简单工厂、工厂方法、抽象工厂的比较与分析
- 用一张组织架构图说清楚类和对象
- 一起来学matlab-matlab学习笔记8 基本绘图命令_3 特殊图形绘制
- 看了这个有趣的例子,你就秒懂多线程同步了