fix: 修复plus后端兼容性问题

Signed-off-by: NicholasLD <nicholasld505@gmail.com>

src/components/custom/file-upload.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch } from 'vue';
+import { computed, ref, useAttrs, watch } from 'vue';
 import type { UploadFileInfo, UploadProps } from 'naive-ui';
-import { fetchBatchDeleteOss } from '@/service/api/system/oss';
+import { cloneDeep } from 'lodash-es';
+import { fetchBatchDeleteOss, listByIds } from '@/service/api/system/oss';
 import { getToken } from '@/store/modules/auth/shared';
 import { getServiceBaseURL } from '@/utils/service';
 
@@ -18,6 +19,7 @@ interface Props {
   accept?: string;
   fileSize?: number;
   uploadType?: 'file' | 'image';
+  modelValue?: string | string[] | any[]; // 用于回显
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,24 +30,68 @@ const props = withDefaults(defineProps<Props>(), {
   max: 5,
   accept: '.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.pdf',
   fileSize: 5,
-  uploadType: 'file'
+  uploadType: 'file',
+  modelValue: ''
 });
 
 const attrs: UploadProps = useAttrs();
 
+const accept = computed(() => {
+  return props.uploadType === 'file' ? '.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.pdf' : '.jpg,.jpeg,.png,.gif,.bmp,.webp';
+});
+
 let fileNum = 0;
 const fileList = ref<UploadFileInfo[]>([]);
 
 const needRelaodData = ref(false);
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
 
 defineExpose({
   needRelaodData
 });
 watch(
-  () => fileList.value,
-  newValue => {
-    needRelaodData.value = newValue.length > 0;
-  }
+  () => props.modelValue,
+  async (newValue: string | any[] | string[]) => {
+    if (!newValue) {
+      fileList.value = [];
+      return;
+    }
+
+    let list: UploadFileInfo[] = [];
+
+    if (Array.isArray(newValue)) {
+      list = newValue as UploadFileInfo[];
+    } else {
+      try {
+        const res = await listByIds(newValue);
+        list = res.data;
+      } catch (error) {
+        list = [];
+        throw new Error(`获取文件列表失败: ${error}`);
+      }
+    }
+
+    fileList.value = list.map((item: any) => {
+      if (typeof item === 'string') {
+        return {
+          id: item,
+          name: item,
+          url: item,
+          status: 'finished'
+        } as UploadFileInfo;
+      }
+
+      return {
+        id: String(item.ossId),
+        name: item.fileName,
+        url: item.url,
+        status: 'finished'
+      } as UploadFileInfo;
+    });
+  },
+  { deep: true, immediate: true }
 );
 
 const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
@@ -56,7 +102,12 @@ const headers: Record<string, string> = {
   clientid: import.meta.env.VITE_APP_CLIENT_ID!
 };
 
+// 拷贝一份当前的FileList
+let currentFileList: UploadFileInfo[] = [];
+
 function beforeUpload(options: { file: UploadFileInfo; fileList: UploadFileInfo[] }) {
+  currentFileList = cloneDeep(fileList.value);
+
   fileNum += 1;
   const { file } = options;
 
@@ -92,23 +143,54 @@ function isErrorState(xhr: XMLHttpRequest) {
   return response.code !== 200;
 }
 
+// 对象转成指定字符串分隔
+const listToString = (list: any[]) => {
+  let strs = '';
+  const separator = ',';
+  for (const i in list) {
+    if (undefined !== list[i].id && list[i].url?.indexOf('blob:') !== 0) {
+      strs += list[i].id + separator;
+    }
+  }
+  return strs !== '' ? strs.substring(0, strs.length - 1) : '';
+};
+
+// 上传中的文件列表
+const uploadingFiles = ref<any[]>([]);
+
 function handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
   fileNum -= 1;
-  const { file, event } = options;
-  // @ts-expect-error Ignore type errors
-  const responseText = event?.target?.responseText;
-  const response = JSON.parse(responseText);
-  const oss: Api.System.Oss = response.data;
-  fileList.value.find(item => item.id === file.id)!.id = String(oss.ossId);
-  file.id = String(oss.ossId);
-  file.url = oss.url;
-  file.name = oss.fileName;
+  const { file } = options;
+
+  // 标记当前文件上传完成
+  const target = event?.target as XMLHttpRequest;
+  const responseText = target?.responseText;
+  const uploadFileResp = JSON.parse(responseText).data;
+
+  uploadingFiles.value.push({
+    id: uploadFileResp.ossId,
+    name: uploadFileResp.fileName,
+    url: uploadFileResp.url
+  });
+
+  // 检查是否所有文件都上传完成
   if (fileNum === 0) {
+    // 所有文件上传完成，执行批量查询
+    handleAllFilesUploaded();
     window.$message?.success('上传成功');
   }
+
   return file;
 }
 
+async function handleAllFilesUploaded() {
+  fileList.value = [...currentFileList, ...uploadingFiles.value];
+  uploadingFiles.value = [];
+  const fileIds = listToString(fileList.value);
+  emit('update:modelValue', fileIds);
+  needRelaodData.value = true;
+}
+
 function handleError(options: { file: UploadFileInfo; event?: ProgressEvent }) {
   const { event } = options;
   // @ts-expect-error Ignore type errors
@@ -179,4 +261,4 @@ async function handleRemove(file: UploadFileInfo) {
   </NP>
 </template>
 
-<style scoped></style>
+<style scoped></style>