🐛: bugfix:issues: I5ZKVX & I5ZKV8

package/component/src/component/upload/index.vue

@@ -98,6 +98,8 @@ const clearAllCutEffect = () => {
   activeUploadFiles.value = [];
   activeUploadFilesImgs.value = [];
   innerCutVisible.value = false;
+  (orgFileInput.value as HTMLInputElement).value = "";
+  _cropper = null;
 };
 
 const { t } = useI18n();
@@ -229,7 +231,7 @@ const errorF = (errorText: string) => {
   let errorMsg = errorText ? errorText : defaultErrorMsg;
   errorMsg = `layui-vue:${errorMsg}`;
   console.warn(errorMsg);
-  layer.msg(errorMsg, { icon: 2, time: 1000 }, function (res: unknown) {});
+  layer.msg(errorMsg, { icon: 2, time: 1000 }, function (res: unknown) { });
   emit("error", Object.assign({ currentTimeStamp, msg: errorMsg }));
 };
 
@@ -279,7 +281,7 @@ const localUpload = (option: localUploadOption, callback: Function) => {
   if (cb && typeof cb == "function") {
     cb();
   }
-  (orgFileInput.value as HTMLInputElement).value = "";
+  clearAllCutEffect();
 };
 
 const filetoDataURL = (file: File, fn: Function) => {
@@ -325,12 +327,16 @@ const uploadChange = (e: any) => {
     innerCutVisible.value = true;
     setTimeout(() => {
       let _imgs = document.getElementsByClassName("_lay_upload_img");
+      if (_imgs && _imgs.length > 0) {
         let _img = _imgs[0];
         // @ts-ignore
         _cropper = new Cropper(_img, {
           aspectRatio: 16 / 9,
         });
-    }, 400);
+      } else {
+        clearAllCutEffect();
+      }
+    }, 200);
   } else {
     if (arm2) {
       console.warn(cannotSupportCutMsg.value);
@@ -349,6 +355,7 @@ const commonUploadTransaction = (_files: any[]) => {
     });
   } else {
     emit("done", { currentTimeStamp, msg: successText, data: _files });
+    clearAllCutEffect();
   }
 };
 
@@ -396,22 +403,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
+  <div class="layui-upload layui-upload-wrap" :class="disabledPreview ? 'layui-upload-file-disabled' : ''">
-    class="layui-upload layui-upload-wrap"
+    <input type="file" class="layui-upload-file" ref="orgFileInput" :name="field" :field="field" :multiple="multiple"
-    :class="disabledPreview ? 'layui-upload-file-disabled' : ''"
+      :accept="acceptMime" :disabled="disabled" @click="clickOrgInput" @change="uploadChange" />
-  >
-    <input
-      type="file"
-      class="layui-upload-file"
-      ref="orgFileInput"
-      :name="field"
-      :field="field"
-      :multiple="multiple"
-      :accept="acceptMime"
-      :disabled="disabled"
-      @click="clickOrgInput"
-      @change="uploadChange"
-    />
     <div v-if="!drag">
       <div class="layui-upload-btn-box" @click.stop="chooseFile">
         <template v-if="slot.default">
@@ -424,19 +418,13 @@ onUnmounted(() => {
         </template>
       </div>
     </div>
-    <div
+    <div v-else ref="dragRef" class="layui-upload-drag" :class="
-      v-else
-      ref="dragRef"
-      class="layui-upload-drag"
-      :class="
       disabled
         ? 'layui-upload-drag-disable'
         : isDragEnter
           ? 'layui-upload-drag-draging'
           : ''
-      "
+    " @click.stop="chooseFile">
-      @click.stop="chooseFile"
-    >
       <i class="layui-icon"></i>
       <p>{{ dragText }}</p>
       <div class="layui-hide" id="uploadDemoView">
@@ -444,38 +432,17 @@ onUnmounted(() => {
         <img src="" alt="上传成功后渲染" style="max-width: 196px" />
       </div>
     </div>
-    <lay-layer
+    <lay-layer v-model="innerCutVisible" :title="computedCutLayerOption.title" :move="computedCutLayerOption.move"
-      v-model="innerCutVisible"
+      :resize="computedCutLayerOption.resize" :shade="computedCutLayerOption.shade"
-      :title="computedCutLayerOption.title"
+      :shadeClose="computedCutLayerOption.shadeClose" :shadeOpacity="computedCutLayerOption.shadeOpacity"
-      :move="computedCutLayerOption.move"
+      :zIndex="computedCutLayerOption.zIndex" :btnAlign="computedCutLayerOption.btnAlign"
-      :resize="computedCutLayerOption.resize"
+      :area="computedCutLayerOption.area" :anim="computedCutLayerOption.anim"
-      :shade="computedCutLayerOption.shade"
+      :isOutAnim="computedCutLayerOption.isOutAnim" :btn="computedCutLayerOption.btn" @close="clearAllCutEffect">
-      :shadeClose="computedCutLayerOption.shadeClose"
+      <div class="copper-container" v-for="(base64str, index) in activeUploadFilesImgs" :key="`file${index}`">
-      :shadeOpacity="computedCutLayerOption.shadeOpacity"
+        <img :src="base64str" :id="`_lay_upload_img${index}`" class="_lay_upload_img" />
-      :zIndex="computedCutLayerOption.zIndex"
-      :btnAlign="computedCutLayerOption.btnAlign"
-      :area="computedCutLayerOption.area"
-      :anim="computedCutLayerOption.anim"
-      :isOutAnim="computedCutLayerOption.isOutAnim"
-      :btn="computedCutLayerOption.btn"
-      @close="clearAllCutEffect"
-    >
-      <div
-        class="copper-container"
-        v-for="(base64str, index) in activeUploadFilesImgs"
-        :key="`file${index}`"
-      >
-        <img
-          :src="base64str"
-          :id="`_lay_upload_img${index}`"
-          class="_lay_upload_img"
-        />
       </div>
     </lay-layer>
-    <div
+    <div class="layui-upload-list" :class="disabledPreview ? 'layui-upload-list-disabled' : ''">
-      class="layui-upload-list"
-      :class="disabledPreview ? 'layui-upload-list-disabled' : ''"
-    >
       <slot name="preview"></slot>
     </div>
   </div>