diff --git a/apps/web-ele/src/components/cropper/cropper-modal.vue b/apps/web-ele/src/components/cropper/cropper-modal.vue index cf80965ad..5355f67fd 100644 --- a/apps/web-ele/src/components/cropper/cropper-modal.vue +++ b/apps/web-ele/src/components/cropper/cropper-modal.vue @@ -41,8 +41,8 @@ const [Modal, modalApi] = useVbenModal({ onConfirm: handleOk, onOpenChange(isOpen) { if (isOpen) { - // 打开时,进行 loading 加载。后续 CropperImage 组件加载完毕,会自动关闭 loading(通过 handleReady) - modalLoading(true); + // 只有存在可加载图片时才显示 loading,避免空图或异常链接导致一直 loading + modalLoading(!!src.value); } else { // 关闭时,清空右侧预览 previewSource.value = ''; @@ -65,10 +65,14 @@ function handleBeforeUpload(file: File) { reader.readAsDataURL(file); src.value = ''; previewSource.value = ''; + modalLoading(true); reader.addEventListener('load', (e) => { src.value = (e.target?.result as string) ?? ''; filename = file.name; }); + reader.addEventListener('error', () => { + modalLoading(false); + }); return false; } @@ -82,6 +86,10 @@ function handleReady(cropperInstance: CropperType) { modalLoading(false); } +function handleCropperError() { + modalLoading(false); +} + function handlerToolbar(event: string, arg?: number) { if (event === 'scaleX') { scaleX = arg = scaleX === -1 ? 1 : -1; @@ -133,6 +141,7 @@ async function handleOk() { :src="src" height="300px" @cropend="handleCropend" + @cropend-error="handleCropperError" @ready="handleReady" /> diff --git a/apps/web-ele/src/components/cropper/cropper.vue b/apps/web-ele/src/components/cropper/cropper.vue index 5cdf1bc36..d14f75351 100644 --- a/apps/web-ele/src/components/cropper/cropper.vue +++ b/apps/web-ele/src/components/cropper/cropper.vue @@ -144,6 +144,10 @@ function getRoundedCanvas() { context.fill(); return canvas; } + +function handleImageError() { + emit('cropendError'); +}