From 4513b3e735d9c8632b2ebab349bbd5c29c8ca8d6 Mon Sep 17 00:00:00 2001
From: Theo <971366405@qq.com>
Date: Wed, 25 Dec 2024 11:50:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=BF=AE=E5=A4=8D=E5=90=8C?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E9=A1=B5=E9=9D=A2=E5=AD=98=E5=9C=A8=E5=A4=9A?=
 =?UTF-8?q?=E4=B8=AA=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E8=B0=83=E7=94=A8=E7=9A=84=E6=AF=8F=E6=AC=A1=E9=83=BD?=
 =?UTF-8?q?=E6=98=AF=E7=AC=AC=E4=B8=80=E4=B8=AA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复同一个页面存在多个上传组件时候，点击非第一个上传按钮，触发的上传事件仍然为第一个上传事件的bug
---
 src/components/Upload/ImageUpload.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Upload/ImageUpload.vue b/src/components/Upload/ImageUpload.vue
index 7522f89f..b51f1198 100644
--- a/src/components/Upload/ImageUpload.vue
+++ b/src/components/Upload/ImageUpload.vue
@@ -3,6 +3,7 @@
   <!-- 实际的上传组件（隐藏） -->
   <div style="display: none">
     <el-upload
+      ref="uploadRef"
       v-model:file-list="fileList"
       :before-upload="handleBeforeUpload"
       :action="props.action"
@@ -164,6 +165,9 @@ const fileList = ref([] as UploadUserFile[]);
 const valFileList = ref([] as string[]);
 const viewFileList = ref([] as string[]);
 
+// 添加一个ref来引用el-upload组件
+const uploadRef = ref();
+
 watch(
   () => props.modelValue,
   (newVal) => {
@@ -295,9 +299,10 @@ const closePreview = () => {
   viewVisible.value = false;
 };
 
-// 新增一个触发上传的方法
+// 修改triggerUpload方法
 const triggerUpload = () => {
-  const uploadEl = document.querySelector(".el-upload__input") as HTMLElement;
+  // 通过ref直接访问el-upload组件内的input元素
+  const uploadEl = uploadRef.value.$el.querySelector(".el-upload__input");
   if (uploadEl) {
     uploadEl.click();
   }
@@ -359,6 +364,7 @@ const triggerUpload = () => {
   width: v-bind("props.style.width");
   height: v-bind("props.style.height");
   cursor: pointer;
+  background-color: rgb(255 254 254 / 50%);
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;
   transition: var(--el-transition-duration);