feat：修改图片上传逻辑

src/components/upload.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { Uploader, Popup } from "vant";
 import eventBus from "@/api/eventBus";
 import { base_img_url2 } from "@/api/config";
@@ -67,6 +67,12 @@ const props = defineProps({
     type: Number,
     default: 3
   },
+  // 外部传入已上传的图片（兼容回显，不影响原有用法）
+  // 数组内容为后端保存的相对路径，与 emit 出去的 imgArr 一致
+  initImgArr: {
+    type: Array,
+    default: () => []
+  }
 })
 
 
@@ -130,6 +136,38 @@ const deleteImg = (file, e) => {
   emit('handleUpload', { imgArr: imgArr.value, fileList: fileArr.value })
 }
 
+// 外部传入的已上传图片回显处理（只做补充，不改变原有上传逻辑）
+watch(
+  () => props.initImgArr,
+  (val) => {
+    if (!val || val.length === 0) {
+      return;
+    }
+    // 重置本地状态，使用外部传入的图片重新构建
+    fileList.value = [];
+    fileArr.value = [];
+    imgArr.value = [];
+
+    val.forEach((item) => {
+      // item 为后端相对路径，和组件内部 imgArr 一致
+      const url = props.fullPath ? base_img_url2 + item : item;
+      fileArr.value.push(url);
+      imgArr.value.push(item);
+      // Vant Uploader 预览所需结构
+      fileList.value.push({
+        url,
+        isImage: true,
+      });
+    });
+
+    // 同步给外部一次，保证父组件拿到的 imgArr/fileList 跟展示一致
+    eventBus.emit('upload:change', fileArr.value);
+    eventBus.emit('upload:changeArr', imgArr.value);
+    emit('handleUpload', { imgArr: imgArr.value, fileList: fileArr.value });
+  },
+  { immediate: true }
+);
+
 function uploadReset() {
   fileList.value = []
   fileArr.value = []

src/views/old_mini/interactionList/index.vue

@@ -46,12 +46,14 @@
                         </div>
                     </div>
                 </div>
-                <div class="upload-btn">
-                    <el-icon>
-                        <Plus />
-                    </el-icon>
-                    <span>点击上传照片</span>
-                </div>
+                <uploader class="upload-wrap" multiple :max-count="10" :after-read="afterReadUpload">
+                    <div class="upload-btn">
+                        <el-icon>
+                            <Plus />
+                        </el-icon>
+                        <span>点击上传照片</span>
+                    </div>
+                </uploader>
                 <!-- <div class="question-wrapper">
                     <div class="question-text">
                         <span class="text-title">{{ item.phenologyName }}占比</span>
@@ -75,7 +77,7 @@
             <!-- 比例信息（已上传状态显示） -->
             <div class="proportion-info" v-show="item.isConfirmed != null">
                 <span class="proportion-text" v-if="item.replyText">当前果园{{ item.phenologyName }}占比: {{ item.replyText
-                    }}%</span>
+                }}%</span>
                 <span class="proportion-text" v-else>暂无数据</span>
                 <div class="toggle-btn" @click="toggleExpand(item)">
                     <span>{{ item.expanded ? "收起" : "展开" }}</span>
@@ -104,10 +106,11 @@
     <popup v-model:show="showUploadProgressPopup" round class="upload-progress-popup">
         <div class="upload-progress-title">
             <span>照片上传进度</span>
-            <el-progress class="upload-progress" :percentage="50" stroke-width="10" :format="format" />
+            <el-progress class="upload-progress" :percentage="50" :stroke-width="10" :format="format" />
         </div>
         <div class="upload-wrap">
-            <upload :maxCount="10" @handleUpload="handleUploadSuccess">
+            <!-- 把已经上传成功的图片传给 upload 组件做回显，同时保持原有上传事件不变 -->
+            <upload :maxCount="10" :initImgArr="imgArr" @handleUpload="handleUploadSuccess">
             </upload>
         </div>
         <el-input v-model="uploadProgressText" placeholder="请输入您咨询的问题" clearable />
@@ -121,12 +124,16 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import { ElMessage } from "element-plus";
-import { Popup } from "vant";
+import { Uploader, Popup } from "vant";
 import customHeader from "@/components/customHeader.vue";
 import upload from "@/components/upload.vue";
 import FarmInfoPopup from "@/components/popup/farmInfoPopup.vue";
 import { useRouter, useRoute } from "vue-router";
 import { base_img_url2 } from "@/api/config";
+import UploadFile from "@/utils/upliadFile";
+import { getFileExt } from "@/utils/util";
+
+
 const showFarmInfoPopup = ref(false);
 const loading = ref(false);
 const router = useRouter();
@@ -138,6 +145,38 @@ const showUploadProgressPopup = ref(false);
 const uploadProgressText = ref('');
 const format = (percentage) => (percentage === 100 ? '上传完成' : `5/10`)
 
+const uploadFileObj = new UploadFile();
+const imgArr = ref([]);
+const miniUserId = localStorage.getItem("MINI_USER_ID");
+const afterReadUpload = async (data) => {
+    console.log(data)
+    if (!Array.isArray(data)) {
+        data = [data];
+    }
+    for (let file of data) {
+        // 将文件上传至服务器
+        let fileVal = file.file;
+        file.status = "uploading";
+        file.message = "上传中...";
+        let ext = getFileExt(fileVal.name);
+        let key = `birdseye-look-mini/${miniUserId}/${new Date().getTime()}.${ext}`;
+        let resFilename = await uploadFileObj.put(key, fileVal)
+        file.status = "done";
+        file.message = "";
+        if (resFilename) {
+            imgArr.value.push(resFilename)
+        } else {
+            file.status = 'failed';
+            file.message = '上传失败';
+            ElMessage.error('图片上传失败，请稍后再试！')
+        }
+    }
+    // 所有文件上传结束后再打开进度弹窗，此时 imgArr 已包含全部图片
+    if (imgArr.value.length > 0) {
+        showUploadProgressPopup.value = true;
+        console.log("imgArr", imgArr.value);
+    }
+};
 //示例照片
 const showExamplePopup = ref(false);
 const exampleImgData = ref(null);
@@ -253,6 +292,7 @@ const handleDrawRegion = (item) => {
 const uploadData = ref([]);
 const handleUploadSuccess = (data) => {
     uploadData.value = data.imgArr;
+    imgArr.value = [];
 };
 
 onMounted(() => {
@@ -419,16 +459,28 @@ const getFarmList = async () => {
                 }
             }
 
-            .upload-btn {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 4px;
-                color: #0B84E4;
-                padding: 6px;
-                border: 0.5px solid rgba(33, 153, 248, 0.5);
-                border-radius: 4px;
+            .upload-wrap {
+                width: 100%;
                 margin-top: 12px;
+
+                ::v-deep {
+                    .van-uploader__input-wrapper {
+                        width: 100%;
+                    }
+                }
+
+                .upload-btn {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 4px;
+                    color: #0B84E4;
+                    padding: 6px;
+                    border: 0.5px solid rgba(33, 153, 248, 0.5);
+                    border-radius: 4px;
+                    box-sizing: border-box;
+                }
             }
         }