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右键菜单效果代码
Jul 21 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
jquery uaMatch源代码
Feb 14 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
解决$store.getters调用不执行的问题
Nov 08 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 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版
2016/07/21 PHP
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
Python_LDA实现方法详解
2017/10/25 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
python如何删除文件、目录
2020/06/23 Python
python如何控制进程或者线程的个数
2020/10/16 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
一些PHP的面试题
2015/05/06 面试题
行政助理的职责
2013/11/14 职场文书
大学生预备党员自我评价分享
2013/11/16 职场文书
机关门卫制度
2014/02/01 职场文书
单位婚育证明范本
2014/11/21 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers