共计 3746 个字符,预计需要花费 10 分钟才能阅读完成。
最近项目中涉及很多文件上传的地方,然后文件上传又有很多限制。比如文件大小限制,文件个数限制,文件类型限制,文件上传后的列表样式自定义,包括上传进度条等问题。下面是我对 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); | |
} |
element-ui+vue-cli3.0 系列问题一:el-upload 上传组件
element-ui+vue-cli3.0 系列问题二:表格合并
element-ui+vue-cli3.0 系列问题三:el-tooltip 实现文本溢出省略号处理
正文完
发表至: javascript
2019-10-15