手续

src/components/FileUpload/index.vue

@@ -21,6 +21,7 @@
       :on-change="handleChange"
       :on-remove="handleRemove"
       :method="method"
+      :http-request="customUpload"
     >
       <slot>
         <div>
@@ -89,6 +90,7 @@
 import { propTypes } from '@/utils/propTypes';
 import { delOss, listByIds } from '@/api/system/oss';
 import { globalHeaders } from '@/utils/request';
+import axios from 'axios';
 const props = defineProps({
   modelValue: {
     type: [String, Object, Array],
@@ -143,6 +145,7 @@ const uploadList = ref<any[]>([]);
 const baseUrl = import.meta.env.VITE_APP_BASE_API;
 const uploadFileUrl = ref(baseUrl + props.uploadUrl); // 上传文件服务器地址
 const headers = ref(globalHeaders());
+const pendingFiles = ref<UploadFile[]>([]);
 
 const realUploadUrl = computed(() => {
   const search = new URLSearchParams(props.params).toString();
@@ -237,28 +240,33 @@ interface UploadFileWithOssId extends UploadFile {
 }
 
 const handleUploadSuccess = (res: any, file: UploadFileWithOssId) => {
-  console.log(props.data);
-
   if (res.code === 200) {
-    if (res.data) {
-      uploadList.value.push({
-        name: res.data.fileName,
-        url: res.data.url,
-        ossId: res.data.ossId
-      });
-    } else {
-      uploadList.value.push({});
-    }
+    console.log('上传成功');
+    // 上传成功，不管 data 是否为空
+    uploadList.value.push({
+      name: file.name,
+      url: (res.data && res.data.url) || '',
+      ossId: (res.data && res.data.ossId) || ''
+    });
   } else {
+    console.log('失败', res);
+
     number.value--;
     proxy?.$modal.closeLoading();
-    proxy?.$modal.msgError(res.msg);
+    proxy?.$modal.msgError(res.msg || '上传失败');
     fileUploadRef.value?.handleRemove(file);
+    return;
   }
+
   uploadedSuccessfully(res);
 };
 
 const handleChange = (file: any, fileList: any) => {
+  // 记录 status = 'ready' 的文件
+  if (file.status === 'ready') {
+    pendingFiles.value.push(file);
+  }
+
   emit('handleChange', file, fileList);
 };
 
@@ -290,8 +298,6 @@ const handleDelete = async (index: string | number, type?: string) => {
 
 // 上传结束处理
 const uploadedSuccessfully = (res: any) => {
-  console.log(11121);
-
   if (props.isImportInfo) {
     emit('update:modelValue', 'ok');
     fileUploadRef.value?.clearFiles();
@@ -307,8 +313,8 @@ const uploadedSuccessfully = (res: any) => {
 
     emit('update:modelValue', listToString(fileList.value));
     proxy?.$modal.closeLoading();
-    props.onUploadSuccess?.(fileList.value, res);
   }
+  props.onUploadSuccess?.(fileList.value, res);
 };
 
 // 获取文件名称
@@ -334,13 +340,67 @@ const listToString = (list: any[], separator?: string) => {
   return strs != '' ? strs.substring(0, strs.length - 1) : '';
 };
 
-const submitUpload = () => {
-  fileUploadRef.value!.submit();
+// 改造后的 customUpload
+const customUpload = async (options: any) => {
+  if (props.autoUpload) {
+    // 自动上传，单文件请求
+    try {
+      const formData = new FormData();
+      formData.append('file', options.file);
+      Object.entries(props.data).forEach(([k, v]) => {
+        if (v !== null && v !== undefined) formData.append(k, v as any);
+      });
+      const res = await axios?.({
+        url: realUploadUrl.value,
+        method: props.method,
+        data: formData,
+        headers: { 'Content-Type': 'multipart/form-data', ...headers.value }
+      });
+      handleUploadSuccess(res, options.file);
+    } catch (err) {
+      handleUploadError();
+    }
+  } else {
+    // 手动上传，不发请求，只缓存
+    pendingFiles.value.push(options.file);
+  }
 };
 
-defineExpose({
-  submitUpload
-});
+// 改造后的 submitUpload
+const submitUpload = async () => {
+  if (props.autoUpload) {
+    fileUploadRef.value?.submit();
+    return;
+  }
+  if (!pendingFiles.value.length) {
+    return 'noFile';
+  }
+  try {
+    proxy?.$modal.loading('正在上传文件，请稍候...');
+    const formData = new FormData();
+    pendingFiles.value.forEach((f) => {
+      if (f.raw) formData.append('file', f.raw as File);
+    });
+    Object.entries(props.data).forEach(([k, v]) => {
+      if (v !== null && v !== undefined) formData.append(k, v as any);
+    });
+    const res = await axios?.({
+      url: realUploadUrl.value,
+      method: props.method,
+      data: formData,
+      headers: { 'Content-Type': 'multipart/form-data', ...headers.value }
+    });
+    handleUploadSuccess(res.data, {} as any);
+    pendingFiles.value = [];
+    fileUploadRef.value?.clearFiles();
+  } catch (err) {
+    handleUploadError();
+  } finally {
+    proxy?.$modal.closeLoading();
+  }
+};
+
+defineExpose({ submitUpload });
 </script>
 
 <style scoped lang="scss">