From 463e0a7aee6f6f1ca61c2e18f88e5db4b30d9c4d Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Thu, 14 Apr 2022 23:52:27 +0800
Subject: [PATCH] fix(ui/uploader): fix #426

---
 .../__snapshots__/index.spec.js.snap          | 16 +++--
 packages/varlet-ui/src/uploader/Uploader.vue  | 19 +++--
 .../__snapshots__/index.spec.js.snap          | 70 +++++++++++++------
 packages/varlet-ui/src/uploader/uploader.less |  3 +-
 4 files changed, 75 insertions(+), 33 deletions(-)

diff --git a/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap
index c6f9c2d7d69..f907da1024b 100644
--- a/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap
@@ -557,7 +557,9 @@ exports[`test form with switch 3`] = `
 exports[`test form with uploader 1`] = `
 "<div class=\\"var-form\\">
   <div class=\\"var-uploader var--box\\">
-    <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-136\\" class=\\"var-uploader__action var-elevation--2 var-uploader--disabled\\"><input id=\\"var-uploader-136\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+    <div class=\\"var-uploader__file-list\\">
+      <div class=\\"var-uploader__action var-elevation--2 var-uploader--disabled\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    </div>
     <transition-stub>
       <!--v-if-->
     </transition-stub>
@@ -576,7 +578,9 @@ exports[`test form with uploader 1`] = `
 exports[`test form with uploader 2`] = `
 "<div class=\\"var-form\\">
   <div class=\\"var-uploader var--box\\">
-    <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-136\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-136\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+    <div class=\\"var-uploader__file-list\\">
+      <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    </div>
     <transition-stub>
       <!--v-if-->
     </transition-stub>
@@ -595,7 +599,9 @@ exports[`test form with uploader 2`] = `
 exports[`test form with uploader 3`] = `
 "<div class=\\"var-form\\">
   <div class=\\"var-uploader var--box\\">
-    <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-136\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-136\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+    <div class=\\"var-uploader__file-list\\">
+      <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    </div>
     <transition-stub>
       <div class=\\"var-form-details\\">
         <div class=\\"var-form-details__message\\">至少上传一个</div>
@@ -617,7 +623,9 @@ exports[`test form with uploader 3`] = `
 exports[`test form with uploader 4`] = `
 "<div class=\\"var-form\\">
   <div class=\\"var-uploader var--box\\">
-    <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-136\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-136\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+    <div class=\\"var-uploader__file-list\\">
+      <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    </div>
     <transition-stub>
       <!--v-if-->
     </transition-stub>
diff --git a/packages/varlet-ui/src/uploader/Uploader.vue b/packages/varlet-ui/src/uploader/Uploader.vue
index 02a8ce20066..2ca2f637e72 100644
--- a/packages/varlet-ui/src/uploader/Uploader.vue
+++ b/packages/varlet-ui/src/uploader/Uploader.vue
@@ -20,16 +20,16 @@
         ></div>
       </div>
 
-      <label
-        :for="id"
+      <div
         :class="
           classes([!$slots.default, `${n('action')} var-elevation--2`], [disabled || formDisabled, n('--disabled')])
         "
         v-if="!maxlength || modelValue.length < maxlength"
         v-ripple="{ disabled: disabled || formDisabled || readonly || formReadonly || !ripple || $slots.default }"
+        @click="triggerAction"
       >
         <input
-          :id="id"
+          ref="input"
           :class="n('action-input')"
           type="file"
           :multiple="multiple"
@@ -42,7 +42,7 @@
         <slot>
           <var-icon :class="n('action-icon')" var-uploader-cover name="plus" />
         </slot>
-      </label>
+      </div>
     </div>
 
     <var-form-details :error-message="errorMessage" :maxlength-text="maxlengthText" />
@@ -75,7 +75,7 @@ import VarIcon from '../icon'
 import VarPopup from '../popup'
 import ImagePreview from '../image-preview'
 import Ripple from '../ripple'
-import { defineComponent, nextTick, reactive, computed, watch, ref, getCurrentInstance } from 'vue'
+import { defineComponent, nextTick, reactive, computed, watch, ref } from 'vue'
 import { props } from './props'
 import { isNumber, isHTMLSupportImage, isHTMLSupportVideo, toNumber, isString } from '../utils/shared'
 import { call, useValidation, createNamespace } from '../utils/components'
@@ -111,7 +111,7 @@ export default defineComponent({
   },
   props,
   setup(props) {
-    const id: Ref<string> = ref(`var-uploader-${getCurrentInstance()!.uid}`)
+    const input: Ref<null | HTMLElement> = ref(null)
     const showPreview: Ref<boolean> = ref(false)
     const currentPreview: Ref<null | VarFile> = ref(null)
     const maxlengthText: ComputedRef<string> = computed(() => {
@@ -141,6 +141,10 @@ export default defineComponent({
       return modelValue
     })
 
+    const triggerAction = () => {
+      input.value!.click()
+    }
+
     const preview = (varFile: VarFile) => {
       const { disabled, readonly, previewed } = props
 
@@ -322,7 +326,7 @@ export default defineComponent({
     return {
       n,
       classes,
-      id,
+      input,
       files,
       showPreview,
       currentPreview,
@@ -333,6 +337,7 @@ export default defineComponent({
       formDisabled: form?.disabled,
       formReadonly: form?.readonly,
       preview,
+      triggerAction,
       handleChange,
       handleRemove,
       getSuccess,
diff --git a/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap
index bb3487b53b7..8e243d43aa2 100644
--- a/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap
@@ -2,7 +2,9 @@
 
 exports[`test uploader disabled 1`] = `
 "<div class=\\"var-uploader var--box\\">
-  <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-182\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-182\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+  <div class=\\"var-uploader__file-list\\">
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+  </div>
   <transition-stub>
     <!--v-if-->
   </transition-stub>
@@ -25,7 +27,8 @@ exports[`test uploader disabled 2`] = `
       <div class=\\"var-uploader__file-close\\"><i class=\\"var-icon var-icon--set var-icon-delete var-uploader__file-close-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
       <!--v-if-->
       <div class=\\"var-uploader__file-indicator\\"></div>
-    </div><label for=\\"var-uploader-182\\" class=\\"var-uploader__action var-elevation--2 var-uploader--disabled\\"><input id=\\"var-uploader-182\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label>
+    </div>
+    <div class=\\"var-uploader__action var-elevation--2 var-uploader--disabled\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -44,7 +47,9 @@ exports[`test uploader disabled 2`] = `
 exports[`test uploader example 1`] = `
 "<div class=\\"app-type\\">基本使用</div>
 <div class=\\"var-uploader var--box\\">
-  <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-3\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-3\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+  <div class=\\"var-uploader__file-list\\">
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+  </div>
   <transition-stub>
     <!--v-if-->
   </transition-stub>
@@ -69,7 +74,8 @@ exports[`test uploader example 1`] = `
       <div class=\\"var-uploader__file-name\\">https://www.runoob.com/try/demo_source/mov_bbb.mp4</div>
       <div class=\\"var-uploader__file-close\\"><i class=\\"var-icon var-icon--set var-icon-delete var-uploader__file-close-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div><img class=\\"var-uploader__file-cover\\" src=\\"https://varlet.gitee.io/varlet-ui/cover.jpg\\">
       <div class=\\"var-uploader__file-indicator\\"></div>
-    </div><label for=\\"var-uploader-11\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-11\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label>
+    </div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -100,7 +106,8 @@ exports[`test uploader example 1`] = `
       <div class=\\"var-uploader__file-name\\">https://varlet.gitee.io/varlet-ui/cat.jpg</div>
       <div class=\\"var-uploader__file-close\\"><i class=\\"var-icon var-icon--set var-icon-delete var-uploader__file-close-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div><img class=\\"var-uploader__file-cover\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\">
       <div class=\\"var-uploader__file-indicator var-uploader--error\\"></div>
-    </div><label for=\\"var-uploader-21\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-21\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label>
+    </div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -116,7 +123,9 @@ exports[`test uploader example 1`] = `
 </div>
 <div class=\\"app-type\\">文件数量限制</div>
 <div class=\\"var-uploader var--box\\">
-  <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-32\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-32\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+  <div class=\\"var-uploader__file-list\\">
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+  </div>
   <transition-stub>
     <div class=\\"var-form-details\\">
       <div class=\\"var-form-details__message\\"></div>
@@ -134,7 +143,9 @@ exports[`test uploader example 1`] = `
 </div>
 <div class=\\"app-type\\">文件大小限制</div>
 <div class=\\"var-uploader var--box\\">
-  <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-40\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-40\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+  <div class=\\"var-uploader__file-list\\">
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+  </div>
   <transition-stub>
     <!--v-if-->
   </transition-stub>
@@ -149,7 +160,9 @@ exports[`test uploader example 1`] = `
 </div>
 <div class=\\"app-type\\">上传预处理</div>
 <div class=\\"var-uploader var--box\\">
-  <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-48\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-48\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+  <div class=\\"var-uploader__file-list\\">
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+  </div>
   <transition-stub>
     <!--v-if-->
   </transition-stub>
@@ -164,7 +177,9 @@ exports[`test uploader example 1`] = `
 </div>
 <div class=\\"app-type\\">禁用</div>
 <div class=\\"var-uploader var--box\\">
-  <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-56\\" class=\\"var-uploader__action var-elevation--2 var-uploader--disabled\\"><input id=\\"var-uploader-56\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+  <div class=\\"var-uploader__file-list\\">
+    <div class=\\"var-uploader__action var-elevation--2 var-uploader--disabled\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+  </div>
   <transition-stub>
     <!--v-if-->
   </transition-stub>
@@ -179,7 +194,9 @@ exports[`test uploader example 1`] = `
 </div>
 <div class=\\"app-type\\">只读</div>
 <div class=\\"var-uploader var--box\\">
-  <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-64\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-64\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+  <div class=\\"var-uploader__file-list\\">
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+  </div>
   <transition-stub>
     <!--v-if-->
   </transition-stub>
@@ -199,7 +216,8 @@ exports[`test uploader example 1`] = `
       <div class=\\"var-uploader__file-name\\">https://varlet.gitee.io/varlet-ui/cat.jpg</div>
       <div class=\\"var-uploader__file-close\\"><i class=\\"var-icon var-icon--set var-icon-delete var-uploader__file-close-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div><img class=\\"var-uploader__file-cover\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\">
       <div class=\\"var-uploader__file-indicator\\"></div>
-    </div><label for=\\"var-uploader-72\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-72\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label>
+    </div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -215,10 +233,12 @@ exports[`test uploader example 1`] = `
 </div>
 <div class=\\"app-type\\">自定义上传样式</div>
 <div class=\\"var-uploader var--box\\">
-  <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-81\\" class=\\"\\"><input id=\\"var-uploader-81\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\">
+  <div class=\\"var-uploader__file-list\\">
+    <div class=\\"\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\">
         <!--v-if-->
         <div class=\\"var-button__content\\">上传</div>
-      </button></label></div>
+      </button></div>
+  </div>
   <transition-stub>
     <!--v-if-->
   </transition-stub>
@@ -238,7 +258,8 @@ exports[`test uploader example 1`] = `
       <div class=\\"var-uploader__file-name\\">https://varlet.gitee.io/varlet-ui/cat.jpg</div>
       <div class=\\"var-uploader__file-close\\"><i class=\\"var-icon var-icon--set var-icon-delete var-uploader__file-close-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div><img class=\\"var-uploader__file-cover\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\">
       <div class=\\"var-uploader__file-indicator var-uploader--error\\"></div>
-    </div><label for=\\"var-uploader-89\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-89\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label>
+    </div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -259,10 +280,12 @@ exports[`test uploader example 1`] = `
   <div style=\\"margin: 4px 12px 4px 0px;\\"><img class=\\"custom-uploader-file\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\"></div>
   <div style=\\"margin: 4px 0px;\\">
     <div class=\\"var-uploader var--box\\">
-      <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-99\\" class=\\"\\"><input id=\\"var-uploader-99\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 var-button--round\\">
+      <div class=\\"var-uploader__file-list\\">
+        <div class=\\"\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 var-button--round\\">
             <!--v-if-->
             <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-upload\\" style=\\"transition: transform 0ms; font-size: 28px;\\"></i></div>
-          </button></label></div>
+          </button></div>
+      </div>
       <transition-stub>
         <!--v-if-->
       </transition-stub>
@@ -282,7 +305,9 @@ exports[`test uploader example 1`] = `
 
 exports[`test uploader hide file list 1`] = `
 "<div class=\\"var-uploader var--box\\">
-  <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-201\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-201\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+  <div class=\\"var-uploader__file-list\\">
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+  </div>
   <transition-stub>
     <!--v-if-->
   </transition-stub>
@@ -299,7 +324,9 @@ exports[`test uploader hide file list 1`] = `
 
 exports[`test uploader length over maxlength in multiple mode 1`] = `
 "<div class=\\"var-uploader var--box\\">
-  <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-191\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-191\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+  <div class=\\"var-uploader__file-list\\">
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+  </div>
   <transition-stub>
     <div class=\\"var-form-details\\">
       <div class=\\"var-form-details__message\\"></div>
@@ -319,7 +346,9 @@ exports[`test uploader length over maxlength in multiple mode 1`] = `
 
 exports[`test uploader validation 1`] = `
 "<div class=\\"var-uploader var--box\\">
-  <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-171\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-171\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label></div>
+  <div class=\\"var-uploader__file-list\\">
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+  </div>
   <transition-stub>
     <div class=\\"var-form-details\\">
       <div class=\\"var-form-details__message\\">您至少上传一个</div>
@@ -345,7 +374,8 @@ exports[`test uploader validation 2`] = `
       <div class=\\"var-uploader__file-close\\"><i class=\\"var-icon var-icon--set var-icon-delete var-uploader__file-close-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
       <!--v-if-->
       <div class=\\"var-uploader__file-indicator\\"></div>
-    </div><label for=\\"var-uploader-171\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-171\\" class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></label>
+    </div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
diff --git a/packages/varlet-ui/src/uploader/uploader.less b/packages/varlet-ui/src/uploader/uploader.less
index 1dd29c136f0..5e235a845b6 100644
--- a/packages/varlet-ui/src/uploader/uploader.less
+++ b/packages/varlet-ui/src/uploader/uploader.less
@@ -170,10 +170,9 @@
 
   &__action-input {
     display: block;
-    z-index: 1;
     width: 0;
     height: 0;
-    opacity: 0;
+    visibility: hidden;
   }
 
   &__preview[var-uploader-cover] {