近来项目中触及许多文件上传的处所，然后文件上传又有许多限定。比方文件大小限定，文件个数限定，文件范例限定，文件上传后的列表款式自定义，包含上传进度条等题目。下面是我对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);
  }

延续更新……