设计方案

src/components/FileUpload/index.vue

@@ -18,6 +18,8 @@
       :drag="isDarg"
       :data="data"
       :auto-upload="autoUpload"
+      :on-change="handleChange"
+      :on-remove="handleRemove"
     >
       <slot>
         <div>
@@ -108,8 +110,9 @@ const props = defineProps({
   showFileList: propTypes.bool.def(false),
   // 其他参数
   data: propTypes.object.def({}),
+  // 成功回调
   onUploadSuccess: {
-    type: Function as PropType<(files: any[]) => void>,
+    type: Function as PropType<(files: any[], res: any) => void>,
     default: undefined
   },
   // 失败回调
@@ -124,7 +127,8 @@ const props = defineProps({
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'handleChange', 'handleRemove']);
+
 const number = ref(0);
 const uploadList = ref<any[]>([]);
 const baseUrl = import.meta.env.VITE_APP_BASE_API;
@@ -236,34 +240,49 @@ const handleUploadSuccess = (res: any, file: UploadFileWithOssId) => {
     } else {
       uploadList.value.push({});
     }
-
-    uploadedSuccessfully();
   } else {
     number.value--;
     proxy?.$modal.closeLoading();
     proxy?.$modal.msgError(res.msg);
     fileUploadRef.value?.handleRemove(file);
-    uploadedSuccessfully();
   }
+  uploadedSuccessfully(res);
+};
+
+const handleChange = (file: any, fileList: any) => {
+  emit('handleChange', file, fileList);
+};
+
+// 删除文件
+const handleRemove = (file: any, fileList: any) => {
+  console.log(11);
+
+  emit('handleRemove', file, fileList);
 };
 
 // 删除文件
 const handleDelete = async (index: string | number, type?: string) => {
   await proxy?.$modal.confirm('是否确认删除此文件？').finally();
-  if (type === 'ossId') {
-    delOss(index);
-    fileList.value = fileList.value.filter((f) => f.ossId !== index);
-  } else {
-    let ossId = fileList.value[index].ossId;
-    delOss(ossId);
-    index = parseInt(index as string);
-    fileList.value.splice(index, 1);
+  try {
+    if (type === 'ossId') {
+      delOss(index);
+      fileList.value = fileList.value.filter((f) => f.ossId !== index);
+    } else {
+      let ossId = fileList.value[index].ossId;
+      delOss(ossId);
+      index = parseInt(index as string);
+      fileList.value.splice(index, 1);
+    }
+  } finally {
+    emit('handleRemove');
+    emit('update:modelValue', listToString(fileList.value));
   }
-  emit('update:modelValue', listToString(fileList.value));
 };
 
 // 上传结束处理
-const uploadedSuccessfully = () => {
+const uploadedSuccessfully = (res: any) => {
+  console.log(11121);
+
   if (props.isImportInfo) {
     emit('update:modelValue', 'ok');
     fileUploadRef.value?.clearFiles();
@@ -279,13 +298,14 @@ const uploadedSuccessfully = () => {
 
     emit('update:modelValue', listToString(fileList.value));
     proxy?.$modal.closeLoading();
-    props.onUploadSuccess?.(fileList.value);
+    props.onUploadSuccess?.(fileList.value, res);
   }
 };
 
 // 获取文件名称
 const getFileName = (name: string) => {
   // 如果是url那么取最后的名字 如果不是直接返回
+  if (!name) return '';
   if (name.lastIndexOf('/') > -1) {
     return name.slice(name.lastIndexOf('/') + 1);
   } else {