vue+iview实现文件上传


Posted in Vue.js onNovember 17, 2020

vue+iview文件上传(base64编码、类型验证、大小限制、多文件上传及文件预览)

​ iview对文件上传提供了一个专门的标签Upload,不过这个标签默认需要一个接口action属性,但一般我们向后台上传文件并不会选择文件直接就上传了 而是需要和其他的值一起发送请求给后台,并且文件都是转成base64编码。

iview提供了一个方法阻止默认上传:before-upload这个方法是在上传文件之前做的一些操作,当这个方法返回false表示手动上传,不会通过action属性来提交文件

base64、类型验证、大小限制:

<Upload
 :before-upload="before"
 action="">
 <Button icon="ios-cloud-upload-outline">文件上传</Button>
 </Upload>
 <div v-if="file!==null">{{file.name}}</div>
<script>
 export default{
 data(){
 return{
 file:null
 }
 }
 methods:{
 before(file) {//上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传
 this.file = file
 const FileExt = this.file.name.replace(/.+\./, "");//取得文件的后缀名
 if (file.size > 2097152) {//限制文件的大小
  this.$Message.error(file.name + '大小超过2M!')
  this.file = null //超过大小将文件清空
 } else if (['mp3'].indexOf(FileExt.toLowerCase()) === -1) { //判断文件是否是mp3格式
  this.$Message.error('请上传以mp3结尾的文件');
  this.file=null
 }else{
  const reader = new FileReader() //读取文件的字符流
  reader.readAsDataURL(file)//将文件读取为 DataURL 以data:开头的字符串
  reader.onload = e => {
  // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
  const code = e.target.result;
  this.algorithmData.videoFiles = code
  }
 }
 return false
 },
 /*上面判断文件格式的方式有很多 file对象中包含了文件的type属性 可打印file看看有哪些文件属性
 对于一般文件的格式type都能显示 但是对于ini这些类型的配置文件是无法给出你类型的
 如果后台明确指出具体的后缀名 用这个比较粗暴
 if(!/image\/\w+/.test(file.type)) 图片验证 只要是图片类型都允许,就不需要通过后缀名判断
 */
 }
 }
</script>

注意:当你的before-upload返回false后。upload的其他方法是不会触发的,比如文件格式验证和文件大小限制的这个钩子是发生在before-upload之后的均不会触发

Upload标签提供一个multiple属性允许上传多个文件

多文件上传、图片预览:

vue+iview实现文件上传

<div class="demo-upload-list" v-for="fileSrc in srcList">
 <img :src="fileSrc" alt=""><!-- 图片预览部分-->
</div>
<Tooltip content="文件格式为jpg、jpeg、png" placement="right">
 <Upload
 :before-upload="handleBeforeUpload"
 multiple
 type="drag"
 action=""
 style="display: inline-block;width:58px;">
 <div style="width: 58px;height:58px;line-height: 58px;">
 <Icon type="ios-camera" size="20"></Icon>
 </div>
 </Upload>
</Tooltip>

<script>
 export default{
 data(){
 return{
 uploadList:[],
 srcList = []
 }
 }
 methods:{
 handleBeforeUpload(file) {
 /*const FileExt = file.name.replace(/.+\./, "");*/
 if(this.uploadList.length<3) {
  if (file.size > 2097152) {
  this.$Message.error(file.name + '大小超过2M!')
  this.file = null
  } else if (!/image\/\w+/.test(file.type)) {
  this.$Message.error('请上传以jpg、jpeg、png等结尾的图片文件');//FileExt.toLowerCase()
  this.file = null
  }
  this.base64(file)
  this.uploadList.push(file)
 }
 else{
  this.$Message.warning('只能上传3张图片!')
 }
 return false;
 },
 base64(file) {
 let reader = new FileReader()
 reader.onload = (e) => {
  this.srcList.push(e.target.result)//将base64编码存储到路径数组中
 }
 reader.readAsDataURL(file)
 },
 }
 }
</script>

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
vue+iview实现分页及查询功能
Nov 17 #Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 #Vue.js
vue+iview分页组件的封装
Nov 17 #Vue.js
在vue中通过render函数给子组件设置ref操作
Nov 17 #Vue.js
vue+vant实现购物车全选和反选功能
Nov 17 #Vue.js
vue使用vant中的checkbox实现全选功能
Nov 17 #Vue.js
You might like
php 静态变量的初始化
2009/11/15 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP线程的内存回收问题
2016/07/08 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
医科大学毕业生自荐信
2014/02/03 职场文书
少年闰土教学反思
2014/02/22 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
田径运动会通讯稿
2014/09/13 职场文书
项目经理岗位职责
2015/01/31 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
win10更新失败无限重启解决方法
2022/04/19 数码科技