fix: failed to upload theme and plugin

src/modules/interface/themes/components/ThemeInstallModal.vue

@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 import { VModal } from "@halo-dev/components";
-import VueFilePond from "vue-filepond";
-import "filepond/dist/filepond.min.css";
+import FilePondUpload from "@/components/upload/FilePondUpload.vue";
 import { apiClient } from "@halo-dev/admin-shared";
-
-const FilePond = VueFilePond();
+import { computed, ref } from "vue";
 
 withDefaults(
   defineProps<{
@@ -20,26 +18,25 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
+const FilePondUploadRef = ref();
+
 const handleVisibleChange = (visible: boolean) => {
   emit("update:visible", visible);
   if (!visible) {
     emit("close");
+    FilePondUploadRef.value.handleRemoveFiles();
   }
 };
 
-const server = {
-  process: (fieldName, file, metadata, load) => {
-    const formData = new FormData();
-    formData.append(fieldName, file, file.name);
-
-    apiClient.theme.installTheme(file).then((response) => {
-      load(response);
-      handleVisibleChange(false);
-    });
-
-    return {};
+const uploadHandler = computed(() => {
+  return (file, config) =>
+    apiClient.theme.installTheme(
+      {
+        file: file,
       },
-};
+      config
+    );
+});
 </script>
 <template>
   <VModal
@@ -48,12 +45,11 @@ const server = {
     title="安装主题"
     @update:visible="handleVisibleChange"
   >
-    <file-pond
-      ref="pond"
+    <FilePondUpload
+      ref="FilePondUploadRef"
       :allow-multiple="false"
-      :server="server"
-      label-idle="Drop ZIP file here..."
-      name="file"
+      :handler="uploadHandler"
+      label-idle="点击选择文件或者拖拽文件到此处"
     />
   </VModal>
 </template>

src/modules/system/plugins/components/PluginInstallModal.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import { useDialog, VModal } from "@halo-dev/components";
-import VueFilePond from "vue-filepond";
-import "filepond/dist/filepond.min.css";
+import FilePondUpload from "@/components/upload/FilePondUpload.vue";
 import { apiClient } from "@halo-dev/admin-shared";
 import type { Plugin } from "@halo-dev/api-client";
-
-const FilePond = VueFilePond();
+import { computed, ref } from "vue";
+import type { AxiosResponse } from "axios";
 
 withDefaults(
   defineProps<{
@@ -22,26 +21,29 @@ const emit = defineEmits<{
 }>();
 
 const dialog = useDialog();
+const FilePondUploadRef = ref();
 
 const handleVisibleChange = (visible: boolean) => {
   emit("update:visible", visible);
   if (!visible) {
     emit("close");
+    FilePondUploadRef.value.handleRemoveFiles();
   }
 };
 
-const server = {
-  process: (fieldName, file, metadata, load) => {
-    const formData = new FormData();
-    formData.append(fieldName, file, file.name);
-
-    apiClient.plugin.installPlugin(file).then((response) => {
-      load(response);
-
-      const plugin: Plugin = response.data as unknown as Plugin;
+const uploadHandler = computed(() => {
+  return (file, config) =>
+    apiClient.plugin.installPlugin(
+      {
+        file: file,
+      },
+      config
+    );
+});
 
+const onUploaded = async (response: AxiosResponse) => {
+  const plugin = response.data as Plugin;
   handleVisibleChange(false);
-
   dialog.success({
     title: "上传成功",
     description: "是否启动当前安装的插件？",
@@ -64,10 +66,6 @@ const server = {
       }
     },
   });
-    });
-
-    return {};
-  },
 };
 </script>
 <template>
@@ -77,12 +75,12 @@ const server = {
     title="安装插件"
     @update:visible="handleVisibleChange"
   >
-    <file-pond
-      ref="pond"
+    <FilePondUpload
+      ref="FilePondUploadRef"
       :allow-multiple="false"
-      :server="server"
-      label-idle="Drop JAR file here..."
-      name="file"
+      :handler="uploadHandler"
+      label-idle="点击选择文件或者拖拽文件到此处"
+      @uploaded="onUploaded"
     />
   </VModal>
 </template>