摘要：最近項(xiàng)目中涉及很多文件上傳的地方，然后文件上傳又有很多限制。比如文件大小限制，文件個(gè)數(shù)限制，文件類型限制，文件上傳后的列表樣式自定義，包括上傳進(jìn)度條等問題。下面是我對(duì)的上傳組件的一些改造，點(diǎn)擊查看源碼。

最近項(xiàng)目中涉及很多文件上傳的地方，然后文件上傳又有很多限制。比如文件大小限制，文件個(gè)數(shù)限制，文件類型限制，文件上傳后的列表樣式自定義，包括上傳進(jìn)度條等問題。下面是我對(duì)element-ui的上傳組件的一些改造， 點(diǎn)擊查看源碼。

我是自己維護(hù)了一個(gè)列表數(shù)據(jù)，再對(duì)這個(gè)列表數(shù)據(jù)進(jìn)行一些操作，沒用組件自帶的。先看看我的組件模版

limit: 限制文件個(gè)數(shù)
action：文件的上傳地址（這里我沒有特別封裝axios，直接用默認(rèn)的）
accept：接受上傳的文件類型（字符串）
data：上傳時(shí)附帶的額外參數(shù)
multiple：多選（布爾類型，我這里設(shè)為true，即可以批量上傳）
show-file-list：是否顯示文件上傳列表
with-credentials：是否攜帶cookie，布爾類型，true表示攜帶

這是我設(shè)置的一些初始值

下面最重要的就是鉤子函數(shù)了

1、handleExceed是文件超出個(gè)數(shù)限制時(shí)的鉤子

private handleExceed(files: any, fileList: any) {
    if (fileList.length > 20) {
      this.$message.error("最多允許上傳20個(gè)文件");
      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("請(qǐng)上傳正確的格式類型");
      return !isExt;
    }
    // 大小和類型驗(yàn)證都通過后，給自定義的列表中添加需要的數(shù)據(jù)
    this.objAddItem(this.tempArr, file);
  }

3、handleProgress文件上傳時(shí)的鉤子，更新進(jìn)度條的值

private handleProgress(event: any, file: any, fileList: any) {
    this.tempArr.forEach((element: any, index: number) => {
      if (element.uid === file.uid) {
        // 更新這個(gè)uid下的進(jìn)度
        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文件上傳成功時(shí)的鉤子

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為下載地址，一般后端人員會(huì)給你返回
        // 我這邊為了做后面的下載，先寫死鏈接供測(cè)試
        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是后端接口返回的數(shù)據(jù)，可以根據(jù)接口返回的數(shù)據(jù)做一些操作
    // 示例
    // 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文件上傳失敗時(shí)的鉤子

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

添加數(shù)據(jù)函數(shù)

private objAddItem(tempArr: any[], file: any) {
    const tempObj = {
      uid: file.uid, // uid用于辨別文件
      originalName: file.name, // 列表顯示的文件名
      progress: 0, // 進(jìn)度條
      code: 200, // 上傳狀態(tài)
    };
    tempArr.push(tempObj);
    this.$emit("changeFileList", tempArr);
  }

上傳的文件下載封裝

private downloadFileFun(url: any) {
    const iframe: any = document.createElement("iframe") as HTMLIFrameElement;
    iframe.style.display = "none"; // 防止影響頁(yè)面
    iframe.style.height = 0; // 防止影響頁(yè)面
    iframe.src = url;
    document.body.appendChild(iframe); // 這一行必須，iframe掛在到dom樹上才會(huì)發(fā)請(qǐng)求
    // 5分鐘之后刪除（onload方法對(duì)于下載鏈接不起作用，就先摳腳一下吧）
    setTimeout(() => {
      iframe.remove();
    }, 5 * 60 * 1000);
  }

持續(xù)更新......