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

最近项目中涉及很多文件上传的地方,然后文件上传又有很多限制。比如文件大小限制,文件个数限制,文件类型限制,文件上传后的列表样式自定义,包括上传进度条等问题。下面是我对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表示携带

这是我设置的一些初始值

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

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);
 }

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

(0)

相关推荐

  • Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法

    需求: 1. 页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置: 2. 页面打开后,调节浏览器窗口大小时需要动态调节部分元素的尺寸: 需要注意的点: window.onresize只能在项目中一处进行引用触发,如果在多个地方进行引用触发,会导致只有1个触发事件生效. 解决"多个组件都需要触发"的方案只能是通过一个地方触发后通过组件间通信进行触发. (以调节class为myDiv的div的宽度为例) 解决需求1的方案: html <template> <div c

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

  • Vue 实现手动刷新组件的方法

    开发过程遇到了一个问题,就是我的 router-view 里面渲染出来的组件输入数据之后,我点击 路由视图外边的导航栏 router-link 按钮,可以实现清除 router-view 里面的数据,也就是使组件重新渲染.vm.$forceUpdate()这个方法可以使当前组件调用这个方法时,重新渲染组件.给 router-view 标签添加 key 属性将 key 绑定的值放在状态管理容器里面,通过 状态管理容器的 mutations 或者 actions 触发 key 值的变化,即可实现重新

  • vue组件文档(.md)中如何自动导入示例(.vue)详解

    症结(懒癌患者) 在写组件库文档的时候,会把示例代码粘贴到文档里,这样做有一个很恶心的地方:每次组件迭代或修改示例都需要重新修改文档中的代码片段.长年累月,苦不堪言. 猜想(狂想曲) 所以我想,可不可以把.vue文件里的template块和script块取出来,放入对应的.md文件中 比如在.md文件中 {{:xx.vue?type=(template|script)}} 便替换示例中对应的template|script块 # xx ## 示例代码 // {{:}} 定义变量规则模版(加个冒号防

  • Vue中Table组件Select的勾选和取消勾选事件详解

    简述 之间设计的界面中使用的是复选框控件,但是经过对官网了一些了解,使我们更加倾向于使用一些官网已经封装好的事件,就比如Table组件的Select勾选和取消勾选的这样一个事件. 勾选 首先我们需要说一下这个需求,如下图: 勾选要实现如下的一个效果:对左侧Table的内容进行勾选,然后勾选行的数据传给右侧的Table中. 实现代码如下: ============1.按照官网封装好的样式去写Table组件======= <template> <div> <Table>&l

  • Vue.js的动态组件模板的实现

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么. 评论现在不再仅仅是简单的文本字段.您希望能够发布链接,上传图像,集成视频等等.必须在此注释中呈现所有这些完全不同的元素.如果你试图在一个组件内执行此操作,它很快就会变得非常混乱. 处理方式 我们该如何处理这个问题?可能大多数人会先检查所有情况,然后在此之后加载特定组件.像这样的东西: <templat

  • 详解Vue组件之间通信的七种方式

    使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下. 父子组件之间的通信 1)props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作 具体代码如下: ``` // 父组件 <template> <div> <h3>props和$emit</h3> <Children v-on:changeMsg="changeMsg"

  • 如何写好一个vue组件,老夫的一年经验全在这了(推荐)

    一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分--prop.事件和插槽: prop 允许外部环境传递数据给组件 event 允许从组件内触发外部环境的副作用 slot 允许外部环境将额外的内容组合在组件中 prop 组件具有自身状态,当没有相关 porps 传入时,使用自身状态完成渲染和交互逻辑:当该组件被调用时,如果有相关 props 传入,那么将会交出控制权,由父组件控制其行为 仅一个值传入组件 如果该组件设计上支持双向绑定,可

  • vue实现一个炫酷的日历组件

    公司业务新开了一个商家管理微信H5移动端项目,日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据. 如图: 假设今天为2018-09-02 90天前: 90天后; 产品需求: 展示当前日期(服务器时间)前后90天,一共181天的日期. 日历可以左右滑动切换月份. 当月份的如果不在181天区间的,需要置灰并且不可点击. 点击日历绑定的节点的外部,关闭弹窗. 涉及内容: 获取服务器时间,渲染日历数据 vue-touch监听手势滑动事件 ios日期兼容处理 clickOutSide自定义指

  • Vue组件通信的几种实现方法

    组件的通信 一般常见的组件之间的通信有以下几种情况,A和B,B和C,B和D之间都是父子关系,C和D之间是兄弟组件关系. 常用的通信手段有两种: 1.ref:给元素或组件注册引用信息 2.children:访问父级组件和子组件的实例. 这两种方式都是直接通过实例的方式获取的方式.示例如下: //comA组件A export default { data () { return { title: '测试通信' } }, methods: { sayHello () { window.alert('你

随机推荐