针对上传组件进行封装在页面直接引用即可上传到minio文件服务器可以预览重新上传只读模式可以传入展示缩略图尺寸传入上传校验尺寸templatedivdiv v-ifreadOnlyclassavatar-uploader:style{ width: width px, height: height px }div v-ifimageUrlclassimage-containerclick.stopimg:src${baseUrl}/file/file/previewByCode/${imageUrl}classavatar:style{ width: width px, height: height px }divclassicon-wrapper:class{ readonly: readOnly }spanclassicon-item previewclickhandlePreviewel-tooltip content查看placementtopeffectdarkel-button typeprimarysizeministylemargin-right: 0px; border: none; background: transparent;classel-icon-zoom-in/el-button/el-tooltip/span/div/divi v-elseclassel-icon-plus avatar-uploader-icon/i/divel-upload v-elseclassavatar-uploader:actionaction:show-file-listfalse:on-successhandleAvatarSuccess:before-uploadbeforeAvatarUpload:style{ width: width px, height: height px }div v-ifimageUrlclassimage-containerclick.stopimg:src${baseUrl}/file/file/previewByCode/${imageUrl}classavatar:style{ width: width px, height: height px }divclassicon-wrapper:class{ readonly: readOnly }spanclassicon-item previewclickhandlePreviewel-tooltip content查看placementtopeffectdarkel-button typeprimarysizeministylemargin-right: 0px; border: none; background: transparent;classel-icon-zoom-in/el-button/el-tooltip/spanspanclassicon-item reuploadclickhandleReUploadel-tooltip content重新上传placementtopeffectdarkel-button typeprimarysizeminiclassel-icon-upload/el-button/el-tooltip/span!--删除按钮默认隐藏父组件控制--span v-ifshowDeleteclassicon-item deleteclickhandleDeleteel-tooltip content删除placementtopeffectdarkel-button typeprimarysizeminiclassel-icon-delete/el-button/el-tooltip/span/div/divi v-elseclassel-icon-plus avatar-uploader-icon:style{ width: width px, height: height px }/i/el-uploadel-image refimageRefstyledisplay: none;:src${baseUrl}/file/file/previewByCode/${imageUrl}:preview-src-list[${baseUrl}/file/file/previewByCode/${imageUrl}]fitcover//div/templatescriptexportdefault{name:ImageUpload,data(){return{baseUrl:this.$global.baseUrl,};},props:{imageUrl:{type:String,default:},action:{type:String,default:},width:{type:[String,Number],default:178},height:{type:[String,Number],default:178},readOnly:{type:Boolean,default:false},maxWidth:{type:Number,default:null},maxHeight:{type:Number,default:null},// 控制删除按钮显示默认不展示showDelete:{type:Boolean,default:false}},methods:{handleAvatarSuccess(res,file){constdatares.data||res;letimageUrl;if(typeofdatastring){imageUrldata;}elseif(data.url){imageUrldata.url;}this.$emit(upload-success,data);},beforeAvatarUpload(file){constisJPGfile.typeimage/jpeg||file.typeimage/png||file.typeimage/gif||file.typeimage/bmp;constisLt2Mfile.size/1024/102410;if(!isJPG){this.$message.error(上传图片只能是 JPG、PNG、GIF、BMP 格式!);returnfalse;}if(!isLt2M){this.$message.error(上传图片大小不能超过 10MB!);returnfalse;}// 关键修改判断是否需要校验尺寸 // 如果四个尺寸属性都没传 → 不校验尺寸直接通过constneedCheckSizethis.maxWidth!null||this.maxHeight!null||this.width!178||this.height!178;if(!needCheckSize){returntrue;}// 图片尺寸校验returnnewPromise((resolve,reject){constreadernewFileReader();reader.onload(e){constimgnewImage();img.onload(){const{width,height}img;letisValidtrue;leterrorMessage;// 如果上传尺寸校验的props不存在使用展示尺寸作为默认值consteffectiveMaxWidththis.maxWidth!null?this.maxWidth:this.width;consteffectiveMaxHeightthis.maxHeight!null?this.maxHeight:this.height;if(width!effectiveMaxWidth||height!effectiveMaxHeight){errorMessage仅支持上传png/jpg/jpeg文件上传尺寸为${effectiveMaxWidth}px*${effectiveMaxHeight}px;isValidfalse;}if(!isValid){this.$message.error(errorMessage);reject(newError(errorMessage));}else{resolve(true);}};img.srce.target.result;};reader.readAsDataURL(file);});},// 原生预览无任何依赖handlePreview(){if(!this.imageUrl)return;// 3. 获取组件实例 - DOM - 找到内部 img - 触发点击// const imageComponent this.$refs.imageRef// if (imageComponent) {// const imgElement imageComponent.$el.querySelector(img)// if (imgElement) {// imgElement.click()// }// }// 直接调用 el-image 组件的公共方法this.$refs.imageRef.clickHandler();},handleReUpload(){if(this.readOnly)return;constuploadInputthis.$el.querySelector(.el-upload__input);if(uploadInput){uploadInput.click();}},// 删除图片内部清空向父组件传递空字符串handleDelete(){if(this.readOnly)return;this.$confirm(确定删除该图片,提示,{confirmButtonText:确定,cancelButtonText:取消,type:warning}).then((){// 直接向父组件抛出空值父组件绑定的 imageUrl 自动清空this.$emit(upload-success,);}).catch((){});}}};/scriptstyle scoped.avatar-uploader{border:none;border-radius:6px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f5f7fa;}.avatar-uploader:hover{cursor:pointer;}.image-container.icon-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;gap:20px;opacity:0;transition:opacity0.3s;z-index:10;}.image-container:hover.icon-wrapper{opacity:1;}.image-container.icon-wrapper.readonly{opacity:1;background:transparent;justify-content:center;}.image-container.icon-wrapper.readonly.icon-item{background:rgba(0,0,0,0.4);}.icon-item{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:16px;transition:all0.2s;}.icon-item:hover{background:#409EFF;transform:scale(1.1);}/* 按钮样式 */.icon-item.el-button{border:none;border-radius:50%;width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent!important;color:#fff!important;box-shadow:none!important;}.icon-item.el-button:hover,.icon-item.el-button:focus{background:transparent!important;color:#fff!important;box-shadow:none!important;}.image-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;}.avatar-uploader img{width:100%;height:100%;object-fit:cover;cursor:default;}.avatar-uploader.el-upload{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}.avatar-uploader-icon{font-size:28px;color:#8c939d;display:flex;align-items:center;justify-content:center;width:100%;height:100%;}.avatar{display:block;}/stylestyle/* 强制隐藏图片预览底部的那个“全屏”图标 *//* 这里直接锁定类名包含 el-icon-full-screen 的图标 *//* .el-image-viewer__actions .el-icon-full-screen { display: none !important; } *//style图片引用方式el-form-item propdouyinQrcodelabel抖音二维码image-upload v-modeldouyinQrcode:image-urldouyinQrcode:width90:height90:actionbaseUrl /file/file/upload/bannerupload-successhandleDouyinQrcodeSuccess/image-uploadpclasshint仅支持上传png/jpg/jpeg文件上传尺寸为90*90px图片大小不超过10M/p/el-form-item*注preview-src-list:1、图片 宽/高 ≤ 屏幕按原尺寸居中显示不放大2、图片 宽/高屏幕1展示图片原尺寸2缩小图片比例缩放到刚好放进屏幕保证完整可见