element-ui+vue-cli3.0：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表示攜帶

這是我設置的一些初始值

下面最重要的就是鉤子函數了

一、handleExceed是文件超出個數限制時的鉤子

private handleExceed(files: any, fileList: any) {
    if (fileList.length > 20) {
      this.$message.error('最多容許上傳20個文件');
      return false;
    }
  }

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

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

四、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;
    // }
  }

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

持續更新......