最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传后的列表样式自定义，包括上传进度条等问题。下面是我对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 "htmlcode">
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 "htmlcode">
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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“vue-cli3.0+element-ui上传组件el-upload的使用”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。