上传文件和图片编辑回显。

src/components/Upload/MultiUpload.vue

@@ -8,6 +8,7 @@
       :show-file-list="false"
       class="img-box"
       list-type="picture-card"
+      accept="image/*"
     >
       <i-ep-plus />
     </el-upload>
@@ -92,6 +93,25 @@ const deleteImg = (index: number) => {
 //   previewImgUrl.value = uploadFile.url!;
 //   dialogVisible.value = true;
 // };
+
+//   用于编辑的回显，传进来的urlList没有http前缀
+const initList = (list: string[]) => {
+  urlList.value = list;
+  fileList.value = list.map((url) => ({
+    url: import.meta.env.VITE_APP_UPLOAD_URL + url,
+    name: url.split("/").pop(),
+    status: "success",
+  }));
+  console.log(
+    "回显图片",
+    import.meta.env.VITE_APP_UPLOAD_URL,
+    urlList.value,
+    urlList.value
+  );
+};
+defineExpose({
+  initList,
+});
 </script>
 
 <style lang="scss" scoped>

src/views/messages/index.vue

@@ -15,12 +15,14 @@
       @size-change="dataList"
       @current-change="dataList"
       @selection-change="selectionChange"
+      :before-open="onCrudBeforOpen"
     >
       <template #photoLists-form>
-        <MultiUpload v-model="form.photoLists" />
+        <MultiUpload ref="multiuploadRef" v-model="form.photoLists" />
       </template>
       <template #fileLists-form>
         <FilesUpload
+          ref="filesUploadRef"
           v-model:file-name-list="photoNameList"
           v-model:src-list="photoUrlList"
           :limit="1"
@@ -30,9 +32,14 @@
         />
       </template>
       <template #menu="{ row }">
-        <el-button v-if="row.state == '0'" style="color: dodgerblue" link @click="sendMsg(row)">
+        <el-button
+          v-if="row.state == '0'"
+          style="color: dodgerblue"
+          link
+          @click="sendMsg(row)"
+        >
           <el-icon>
-            <Promotion/>
+            <Promotion />
           </el-icon>
           发送
         </el-button>
@@ -326,4 +333,18 @@ onMounted(() => {
   getDeptList();
   getMessageOrgsList();
 });
+
+const filesUploadRef = ref();
+const multiuploadRef = ref();
+const onCrudBeforOpen = (done, type) => {
+  done();
+  if (type === "edit") {
+    nextTick(() => {
+      multiuploadRef.value &&
+        multiuploadRef.value.initList(form.value.photoLists);
+      filesUploadRef.value &&
+        filesUploadRef.value.setFileList(form.value.fileLists);
+    });
+  }
+};
 </script>