action="file_upload" //上传地址 :http-request="uploadFile" //上传接口函数 list-type="picture-card" //方块卡片形式 :limit="1" //最大限制上传数量 :class="{ hide: hideUploadBtn }" //超过上传数量,上传按钮隐藏 :file-list="baseForm.attach_list" //文件数组 :before-upload="beforeAvatarUpload" //上传前函数:比如上传类型、大小判断 :on-preview="handlePictureCardPreview" //点击放大图片 :on-change="handleEditChange" //图片变化时:可控制上传按钮不显示 :on-remove="handleRemove" //删除图片时:可控制上传按钮不显示 accept="."> //可接受的上传样式 上传按钮显示+形状 上传按钮显示的图片
/*-----------------------------上传相关-----------------------------*/
//点击图片放大图片
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 移除图片操作,控制上传按钮不显示
handleRemove(file, fileList) {
// // fileList为移除后剩余的图片数组 赋值给this.fileList 则展示正确
// this.baseForm.attach_list = fileList;
// 上传图片 > n 则隐藏上传组件
this.hideUploadBtn = fileList.length >= 1;
},
// 最多上传n张图,超过时隐藏上传按钮
handleEditChange(file, fileList) {
this.hideUploadBtn = fileList.length >= 1;
},
//超过上传限制时,上传按钮不显示。
.hide {
/deep/.el-upload--picture-card {
display: none !important;
}
}
//去掉过渡动画,不然删除操作的时候,布局会闪一下。
/deep/ .el-upload-list__item {
transition: none !important
}