需求
要求:上传图片不超过五张,每张图片不超过20M,达到五张限制后自动隐藏上传组件
实现
HTML代码:
关键代码 :class="{‘hide’:hideUploadAdd}",这个是样式控制
<el-upload
action=" "
list-type="picture-card"
multiple
:limit="5"
:file-list="fileListAdd"
:on-preview="handlePictureCardPreview"
:on-remove="handleAddRemove"
:on-change="handleAddChange"
:on-exceed="handleExceed"
:auto-upload="false"
:class="{'hide':hideUploadAdd}"
>
<i class="el-icon-plus"></i>
<div class="el-upload__tip" slot="tip">(最多上传5张图片,每张不超过20M)</div>
</el-upload>
js代码:
// 上传change事件
handleAddChange(file, fileList) {
// 图片大小限制
const isLt20M = file.size / 1024 / 1024 < 20;
if (!isLt20M) {
this.$message.error("上传图片大小不能超过 20MB!");
// 发现某一张超过大小就从列表移除
fileList.splice(-1, 1);
} else {
this.fileListAdd = fileList;
}
// 上传文件>=限制个数时隐藏上传组件
if (fileList.length >= 5) {
this.hideUploadAdd = true;
}
},
css代码:
<style lang='scss'>
.hide .el-upload--picture-card {
display: none;
}
</style>
实现效果: