From 02df28b2fab4d57dd85429c06f91637755a1e673 Mon Sep 17 00:00:00 2001
From: "DESKTOP-6C3NK6N\\WXS" <815034831@qq.com>
Date: Thu, 8 Aug 2024 10:25:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=84=8F=E8=A7=81=E5=8F=8D=E9=A6=88=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/feedBack/index.vue       |  2 +
 src/components/feedBack/uploadImage.vue | 50 +++++++++++++++++++------
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/components/feedBack/index.vue b/src/components/feedBack/index.vue
index 7d13c95b..176e94f4 100644
--- a/src/components/feedBack/index.vue
+++ b/src/components/feedBack/index.vue
@@ -97,6 +97,7 @@
         <el-form-item :label="$t('feedBack:form:screenshot')" prop="screenshot">
           <uploadImage
             :path.sync="form.ScreenshotList"
+            :isUpload.sync="loading"
             :disabled="type === 'detail'"
             ref="uploadImage"
           />
@@ -209,6 +210,7 @@ export default {
           },
         ],
       },
+      isUpload: false,
     };
   },
   computed: {
diff --git a/src/components/feedBack/uploadImage.vue b/src/components/feedBack/uploadImage.vue
index 5ac479d5..6036f8ea 100644
--- a/src/components/feedBack/uploadImage.vue
+++ b/src/components/feedBack/uploadImage.vue
@@ -15,13 +15,24 @@
       list-type="picture-card"
     >
       <i slot="default" class="el-icon-plus"></i>
-      <div slot="file" slot-scope="{ file }">
-        <viewer :ref="file.url" :images="fileList">
+      <div slot="file" slot-scope="{ file }" style="width: 100%; height: 100%">
+        <viewer
+          :ref="file.url"
+          :images="fileList"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+          "
+        >
           <img
             class="el-upload-list__item-thumbnail"
             :src="`${file.url}`"
             alt=""
             crossorigin="anonymous"
+            style="max-width: 100%; max-height: 100%"
           />
           <span class="el-upload-list__item-actions" v-if="!isUpload">
             <span
@@ -61,12 +72,15 @@ export default {
       required: true,
       default: false,
     },
+    isUpload: {
+      required: true,
+      default: false,
+    },
   },
   data() {
     return {
       fileList: [],
       btnDisabled: false,
-      isUpload: false,
     };
   },
   methods: {
@@ -122,19 +136,29 @@ export default {
     },
     async uploadFile(param) {
       var fileName = param.file.name;
-      this.isUpload = true;
+      this.$emit("update:isUpload", true);
       this.btnDisabled = true;
+      this.fileList.push({
+        url: param.file.url,
+        path: fileName,
+        uid: param.file.uid,
+      });
       let file = await this.fileToBlob(param.file);
       let res = await this.uploadToOSS(fileName, file);
       this.btnDisabled = false;
-      if (!res) return (this.isUpload = false);
-      this.fileList.push({
-        url: this.OSSclientConfig.basePath + res.name,
-        path: res.name,
-        uid: param.file.uid,
-      });
+      let index = this.fileList.findIndex(
+        (item) => item.uid === param.file.uid
+      );
+      if (!res) {
+        if (index >= 0) {
+          this.fileList.splice(index, 1);
+        }
+        return this.$emit("update:isUpload", false);
+      }
+      this.fileList[index].url = this.OSSclientConfig.basePath + res.name;
+      this.fileList[index].path = res.name;
       this.$emit("update:path", [...this.path, res.name]);
-      this.isUpload = false;
+      this.$emit("update:isUpload", false);
       return false;
     },
     beforeUpload(file, fileList) {
@@ -216,4 +240,8 @@ export default {
   align-items: center;
   justify-content: center;
 }
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+  width: auto;
+  height: auto;
+}
 </style>
\ No newline at end of file