vue-cli3.0+element-ui上傳組件el-upload的使用

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

創(chuàng)新互聯(lián)專注于企業(yè)成都營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、永春網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為永春等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

我是自己維護(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è)置的一些初始值

vue-cli3.0+element-ui上傳組件el-upload的使用

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

vue-cli3.0+element-ui上傳組件el-upload的使用

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'; // 防止影響頁面
  iframe.style.height = 0; // 防止影響頁面
  iframe.src = url;
  document.body.appendChild(iframe); // 這一行必須，iframe掛在到dom樹上才會(huì)發(fā)請(qǐng)求
  // 5分鐘之后刪除（onload方法對(duì)于下載鏈接不起作用，就先摳腳一下吧）
  setTimeout(() => {
   iframe.remove();
  }, 5 * 60 * 1000);
 }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱：vue-cli3.0+element-ui上傳組件el-upload的使用
文章轉(zhuǎn)載：http://weahome.cn/article/gisdpg.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

vue-cli3.0+element-ui上傳組件el-upload的使用

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管