vue-cli3.0+element-ui上传组件el-upload的使用


Posted in Javascript onDecember 03, 2018

最近项目中涉及很多文件上传的地方,然后文件上传又有很多限制。比如文件大小限制,文件个数限制,文件类型限制,文件上传后的列表样式自定义,包括上传进度条等问题。下面是我对element-ui的上传组件的一些改造, 点击查看源码。

我是自己维护了一个列表数据,再对这个列表数据进行一些操作,没用组件自带的。先看看我的组件模版

<template>
 <el-upload
  class="upload-demo"
  :limit="limit"
  :action="action"
  :accept="accept"
  :data="data"
  :multiple="multiple"
  :show-file-list="showFileList"
  :on-exceed="handleExceed"
  :with-credentials="withcredentials"
  :before-upload="handleBeforeUpload"
  :on-progress="handleProgress"
  :on-success="handleSuccess"
  :on-error="handleError">
  <el-button size="small" type="primary">上传</el-button>
 </el-upload>
</template>
limit: 限制文件个数
action:文件的上传地址(这里我没有特别封装axios,直接用默认的)
accept:接受上传的文件类型(字符串)
data:上传时附带的额外参数
multiple:多选(布尔类型,我这里设为true,即可以批量上传)
show-file-list:是否显示文件上传列表
with-credentials:是否携带cookie,布尔类型,true表示携带

这是我设置的一些初始值

vue-cli3.0+element-ui上传组件el-upload的使用

下面最重要的就是钩子函数了

vue-cli3.0+element-ui上传组件el-upload的使用

1、handleExceed是文件超出个数限制时的钩子
private handleExceed(files: any, fileList: any) {
  if (fileList.length > 20) {
   this.$message.error('最多允许上传20个文件');
   return false;
  }
 }
2、handleBeforeUpload文件上传前的钩子,可以做一些拦截,return false,则停止上传
private handleBeforeUpload(file: any) {
  // 文件大小限制
  const isLt5M = file.size / 1024 / 1024 < 5;
  if (!isLt5M) {
   this.$message.error('不得超过5M');
   return isLt5M;
  }
  // 文件类型限制
  const name = file.name ? file.name : '';
  const ext = name
   ? name.substr(name.lastIndexOf('.') + 1, name.length)
   : true;
  const isExt = this.accept.indexOf(ext) < 0;
  if (isExt) {
   this.$message.error('请上传正确的格式类型');
   return !isExt;
  }
  // 大小和类型验证都通过后,给自定义的列表中添加需要的数据
  this.objAddItem(this.tempArr, file);
 }
3、handleProgress文件上传时的钩子,更新进度条的值
private handleProgress(event: any, file: any, fileList: any) {
  this.tempArr.forEach((element: any, index: number) => {
   if (element.uid === file.uid) {
    // 更新这个uid下的进度
    const progress = Math.floor(event.percent);
    // 防止上传完接口还没有返回成功值,所以此处给定progress的最大值为99,成功的钩子中再置为100
    element.progress = progress === 100 ? 99 : progress;
    this.$set(this.tempArr, index, element);
    this.$emit('changeFileList', this.tempArr);
   }
  });
 }
4、handleSuccess文件上传成功时的钩子
private handleSuccess(response: any, file: any, fileList: any) {
  this.tempArr.forEach((element: any, index: number) => {
   if (element.uid === file.uid) {
    element.progress = 100;
    // element.url为下载地址,一般后端人员会给你返回
    // 我这边为了做后面的下载,先写死链接供测试
    element.url = 'http://originoo-1.b0.upaiyun.com/freepic/3226433.jpg!freethumb';
    this.$message.success('文件上传成功');
    this.$set(this.tempArr, index, element);
    this.$emit('changeFileList', this.tempArr);
   }
  });
  // response是后端接口返回的数据,可以根据接口返回的数据做一些操作
  // 示例
  // const bizCode = response.rspResult.bizCode;
  // switch (bizCode) {
  //  case 200:
  //   this.tempArr.forEach((element: any, index: number) => {
  //    if (element.uid === file.uid) {
  //     element.progress = 100;
  //     element.url = response.data.url; // 这是后端人员给我返回的下载地址
  //     this.$message.success('文件上传成功');
  //     this.$set(this.tempArr, index, element);
  //     this.$emit('changeFileList', this.tempArr);
  //    }
  //   });
  //   break;
  //  default:
  //   this.tempArr.forEach((element: any, index: number) => {
  //    if (element.uid === file.uid) {
  //     this.tempArr.splice(index, 1); // 上传失败删除该记录
  //     this.$message.error('文件上传失败');
  //     this.$emit('changeFileList', this.tempArr);
  //    }
  //   });
  //   break;
  // }
 }
5、handleError文件上传失败时的钩子
private handleError(err: any, file: any, fileList: any) {
  this.tempArr.forEach((element: any, index: number) => {
   if (element.uid === file.uid) {
    this.tempArr.splice(index, 1); // 上传失败删除该记录
    this.$message.error('文件上传失败');
    this.$emit('changeFileList', this.tempArr);
   }
  });
 }
添加数据函数
private objAddItem(tempArr: any[], file: any) {
  const tempObj = {
   uid: file.uid, // uid用于辨别文件
   originalName: file.name, // 列表显示的文件名
   progress: 0, // 进度条
   code: 200, // 上传状态
  };
  tempArr.push(tempObj);
  this.$emit('changeFileList', tempArr);
 }
上传的文件下载封装
private downloadFileFun(url: any) {
  const iframe: any = document.createElement('iframe') as HTMLIFrameElement;
  iframe.style.display = 'none'; // 防止影响页面
  iframe.style.height = 0; // 防止影响页面
  iframe.src = url;
  document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求
  // 5分钟之后删除(onload方法对于下载链接不起作用,就先抠脚一下吧)
  setTimeout(() => {
   iframe.remove();
  }, 5 * 60 * 1000);
 }

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

Javascript 相关文章推荐
JS批量修改PS中图层名称的方法
Jan 26 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
js实现计算器功能
Aug 10 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 #jQuery
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 #Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 #Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 #Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 #Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 #Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 #Javascript
You might like
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
php代码架构的八点注意事项
2016/01/25 PHP
PHP7常量数组用法分析
2016/09/26 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
通过python3实现投票功能代码实例
2019/09/26 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
python安装后的目录在哪里
2020/06/21 Python
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
操行评语大全
2014/04/30 职场文书
出租房屋协议书
2014/09/14 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
《检阅》教学反思
2016/02/22 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫