vue-cli3.0+element-ui上传组件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表示携带

这是我设置的一些初始值

下面最重要的就是钩子函数了

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。