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

private handleExceed(files: any, fileList: any) {
 if (fileList.length > 20) {
 this.$message.error('最多允許上傳20個文件');
 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);
 }

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

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

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