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 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
js自定义瀑布流布局插件
May 16 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 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代码运行时间查看类代码分享
2011/08/06 PHP
php开启openssl的方法
2014/05/15 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
python中星号变量的几种特殊用法
2016/09/07 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Python守护进程实现过程详解
2020/02/10 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
python如何爬取网页中的文字
2020/07/28 Python
Python datetime模块的使用示例
2021/02/02 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
优秀生推荐信范文
2013/11/28 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
文字自荐书范文
2014/02/10 职场文书
食品采购员岗位职责
2014/04/14 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
字节飞书面试promise.all实现示例
2022/06/16 Javascript