!335 fix: 修复上传头像时，如果图片加载失败，弹框一直loading的问题，针对 ele 版本

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"
           />
         </div>

apps/web-ele/src/components/cropper/cropper.vue

@@ -144,6 +144,10 @@ function getRoundedCanvas() {
   context.fill();
   return canvas;
 }
+
+function handleImageError() {
+  emit('cropendError');
+}
 </script>
 
 <template>
@@ -155,6 +159,7 @@ function getRoundedCanvas() {
       :crossorigin="crossorigin"
       :src="src"
       :style="getImageStyle"
+      @error="handleImageError"
       class="h-auto max-w-full"
     />
   </div>