Merge pull request #193 from Yi-Ran6/fix-upload-bug

fix:图片上传修改

Author: DumbDaiDai

src/pages/DetailInfo/question/checkbox.vue

@@ -18,10 +18,10 @@
       </div>
     </div>
     <div class="divider" />
-    <div ref="scrollContainer" class="flex-col p-5 overflow-y-auto h-180 mt-10" style="scroll-behavior: smooth;">
+    <div class="flex-col p-5 overflow-y-auto h-180 mt-10" style="scroll-behavior: smooth;">
       <div v-for="item in localOptions" :key="item.serialNum" class="my-5">
         <div class="flex items-center gap-10">
-          <input type="checkbox" :name="item.serialNum" class="checkbox-sm my-5">
+          <input type="checkbox" :name="`${item.serialNum}`" class="checkbox-sm my-5">
           <input
             v-model="item.content"
             type="text"
@@ -30,7 +30,12 @@
           >
           <div class="ml-10 flex items-center gap-20">
             <div v-if="item.img" class="mt-4">
-              <img :src="item.img" alt="Preview" style="max-width: 50px; max-height: 50px;">
+              <img
+                :key="item.img"
+                :src="item.img"
+                alt="Preview"
+                style="max-width: 50px; max-height: 50px;"
+              >
             </div>
             <input
               v-if="isActive"
@@ -58,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineProps, defineEmits } from "vue";
+import { ref, watch } from "vue";
 import { useRequest } from "vue-hooks-plus";
 import { saveImgAPI } from "@/apis";
 import { ElNotification } from "element-plus";
@@ -80,8 +85,17 @@ const props = defineProps<{
   }[]
 }>();
 
-const scrollContainer = ref<HTMLDivElement>();
-const emits = defineEmits(["update:unique", "on-click", "update:otherOption", "update:optionChoose", "update:title", "update:options", "update:describe"]);
+const emits = defineEmits([
+  "update:unique",
+  "on-click",
+  "update:otherOption",
+  "update:optionChoose",
+  "update:title",
+  "update:options",
+  "update:describe",
+  "update:minimum_option",
+  "update:maximum_option"
+]);
 
 // Local copies of props to maintain reactivity
 const localTitle = ref<string>(props.title || "");
@@ -93,28 +107,41 @@ const localOptions = ref(props.options);
 const localMax = ref(props.maximum_option);
 const localMin = ref(props.minimum_option);
 
-const handleFileChange = async (event, serialNum: number) => {
-  const file = event.target.files[0];
+const handleFileChange = async (event: Event, serialNum: number) => {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
   if (!file) return;
+
   const formData = new FormData();
   formData.append("img", file);
+
+  const currentOption = localOptions.value?.find(item => item.serialNum === serialNum);
+  if (!currentOption) return;
+
+  const originalImg = currentOption.img || "";
+
   useRequest(() => saveImgAPI(formData), {
-    onSuccess(res) {
-      const option = localOptions.value.find(item => item.serialNum === serialNum);
-      if (option) {
-        option.img = res.data;
+    onSuccess(res: any) {
+      if (res.code === 200) {
+
+        currentOption.img = res.data;
+        ElNotification.success("上传图片成功");
+      } else {
+        throw new Error(res.msg || "上传失败");
       }
-      ElNotification.success("上传图片成功");
     },
-    onError(error) {
-      ElNotification.error("上传图片失败" + error);
+    onError(error: any) {
+
+      currentOption.img = originalImg;
+      input.value = "";
+      ElNotification.error("上传图片失败：" + (error.message || error));
     }
   });
 };
 
 const deleteOption = (serialNum: number) => {
-  localOptions.value = localOptions.value.filter(item => item.serialNum !== serialNum);
-  localOptions.value.forEach((item) => {
+  localOptions.value = localOptions.value?.filter(item => item.serialNum !== serialNum);
+  localOptions.value?.forEach((item) => {
     if (item.serialNum > serialNum) {
       item.serialNum -= 1;
     }

src/pages/DetailInfo/question/radio.vue

@@ -18,9 +18,9 @@
       </div>
     </div>
     <div class="divider" />
-    <div ref="scrollContainer" class="flex-col p-5 overflow-y-auto h-180 mt-10" style="scroll-behavior: smooth;">
+    <div class="flex-col p-5 overflow-y-auto h-180 mt-10" style="scroll-behavior: smooth;">
       <div v-for="item in localOptions" :key="item.serialNum" class="flex items-center gap-10 my-5">
-        <input type="radio" :name="props.serialNum" class="radio-sm my-5">
+        <input type="radio" :name="`${props.serialNum}`" class="radio-sm my-5">
         <input
           v-model="item.content"
           type="text"
@@ -29,7 +29,12 @@
         >
         <div class="ml-10 flex items-center gap-20">
           <div v-if="item.img" class="mt-4">
-            <img :src="item.img" alt="Preview" style="max-width: 50px; max-height: 50px;">
+            <img
+              :key="item.img"
+              :src="item.img"
+              alt="Preview"
+              style="max-width: 50px; max-height: 50px;"
+            >
           </div>
           <input
             v-if="isActive"
@@ -56,7 +61,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineProps, defineEmits } from "vue";
+import { ref, watch } from "vue";
 import { useRequest } from "vue-hooks-plus";
 import { saveImgAPI } from "@/apis";
 import { ElNotification } from "element-plus";
@@ -78,29 +83,42 @@ const props = defineProps<{
 
 const emits = defineEmits(["update:unique", "on-click", "update:otherOption", "update:optionChoose", "update:title", "update:options", "update:describe"]);
 
-const scrollContainer = ref<HTMLDivElement>();
 const localTitle = ref<string>(props.title || "");
 const localDescribe = ref<string>(props.describe || "");
 const localOptionChoose = ref<boolean>(props.optionChoose);
 const localUnique = ref<boolean>(props.unique);
 const localOtherOption = ref<boolean>(props.otherOption);
 const localOptions = ref(props.options ? [...props.options] : []);
 
-const handleFileChange = async (event, serialNum: number) => {
-  const file = event.target.files[0];
+const handleFileChange = async (event: Event, serialNum: number) => {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
   if (!file) return;
+
   const formData = new FormData();
   formData.append("img", file);
+
+  const currentOption = localOptions.value.find(item => item.serialNum === serialNum);
+  if (!currentOption) return;
+
+  const originalImg = currentOption.img || "";
+
   useRequest(() => saveImgAPI(formData), {
-    onSuccess(res) {
-      const option = localOptions.value.find(item => item.serialNum === serialNum);
-      if (option) {
-        option.img = res.data;
+    onSuccess(res: any) {
+      if (res.code === 200) {
+
+        currentOption.img = res.data;
+        ElNotification.success("上传图片成功");
+      } else {
+
+        throw new Error(res.msg || "上传失败");
       }
-      ElNotification.success("上传图片成功");
     },
-    onError(error) {
-      ElNotification.error("上传图片失败" + error);
+    onError(error: any) {
+
+      currentOption.img = originalImg;
+      input.value = "";
+      ElNotification.error("上传图片失败：" + (error.message || error));
     }
   });
 };