feat: 改进资源上传接口及事件处理逻辑

mineadmin · Feb 21, 2025 · 8e6ec44 · 8e6ec44
1 parent be42f15
commit 8e6ec44
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 39 deletions.
diff --git a/web/src/components/ma-resource-picker/panel.vue b/web/src/components/ma-resource-picker/panel.vue
@@ -365,20 +365,8 @@ function executeContextmenu(e: MouseEvent, resource: Resource) {
   })
 }
 
-function handleFile(ev: Event, btn: Resources.Button) {
-  console.log(ev.target, btn)
-}
-
-function handleDockClick(e: MouseEvent, btn: Resources.Button) {
-  e.stopPropagation()
-  if (btn?.click) {
-    btn?.click?.(btn, selected as any)
-  }
-  if (btn?.upload) {
-    const node = useParentNode(e, 'div')
-    const fileInput = node.children[0]
-    fileInput?.click?.()
-  }
+function handleFile(ev: InputEvent, btn: Resources.Button) {
+  btn.upload?.((ev?.target!.files) as FileList, { btn, getResourceList })
 }
 
 onMounted(async () => {
@@ -388,6 +376,18 @@ onMounted(async () => {
 
   for (let i = 0; i < apps.length; i++) {
     const app = apps[i] as HTMLDivElement
+    app.addEventListener('click', (e: MouseEvent) => {
+      e.stopPropagation()
+      const node = useParentNode(e, 'div')
+      const fileInput = node.children[0]
+      const btn = resourceStore.getAllButton()?.find(item => item.name === fileInput.getAttribute('name'))
+      if (btn?.click) {
+        btn?.click?.(btn, selected as any)
+      }
+      if (btn?.upload) {
+        fileInput?.click?.()
+      }
+    })
     app?.parentElement?.addEventListener('mouseover', () => {
       const index = i
       app.className = 'res-app main-effect'
@@ -439,6 +439,7 @@ onUnmounted(() => {
   document.querySelectorAll('.ma-resource-dock .res-app').forEach((app) => {
     app.removeEventListener('mousemove', () => {})
     app.removeEventListener('mouseout', () => {})
+    app.removeEventListener('click', () => {})
   })
 })
 </script>
@@ -570,12 +571,17 @@ onUnmounted(() => {
 
     <div class="ma-resource-dock">
       <template v-for="btn in resourceStore.getAllButton()">
-        <div
-          class="res-app-container"
-        >
-          <div class="res-app" @click="handleDockClick($event, btn)">
+        <div class="res-app-container">
+          <div class="res-app">
             <m-tooltip :text="btn.label">
-              <input type="file" :name="btn.name" class="hidden" @change="handleFile($event, btn)">
+              <input
+                type="file"
+                :name="btn.name"
+                class="hidden"
+                v-bind="btn?.uploadConfig ?? {}"
+                @change="handleFile($event, btn)"
+                @click.stop="() => {}"
+              >
               <ma-svg-icon :name="btn.icon" class="res-app-icon" />
             </m-tooltip>
           </div>

diff --git a/web/src/store/modules/useResourceStore.ts b/web/src/store/modules/useResourceStore.ts
@@ -8,35 +8,42 @@
  * @Link   https://github.com/mineadmin
  */
 import type { Resources } from '#/global'
+import { uploadLocal } from '@/utils/uploadLocal.ts'
 
 const resourceDefaultButtons: Resources.Button[] = [
   {
     name: 'local-image-upload',
     label: '图片上传',
     icon: 'solar:upload-square-broken',
-    click: (btn: Resources.Button, selected: any) => {
-      console.log(btn, selected)
+    upload: (files: FileList, args: Resources.Args) => {
+      const options = { file: files[0] }
+      uploadLocal(options).then(() => {
+        args?.getResourceList?.()
+      }).catch((e) => {
+        throw new Error(e)
+      })
     },
-    upload: () => {
-
+    uploadConfig: {
+      accept: 'image/*',
+      limit: 1,
     },
     order: 0,
   },
   {
     name: 'local-file-upload',
     label: '文件上传',
     icon: 'hugeicons:file-upload',
-    click: (args: any) => {
-
+    upload: (files: FileList, args: Resources.Args) => {
+      const options = { file: files[0] }
+      uploadLocal(options).then(() => {
+        args?.getResourceList?.()
+      }).catch((e) => {
+        throw new Error(e)
+      })
     },
-    order: 1,
-  },
-  {
-    name: 'local-file-upload2',
-    label: '文件上传',
-    icon: 'hugeicons:file-upload',
-    click: (args: any) => {
-
+    uploadConfig: {
+      accept: '.doc,.xls,.ppt,.txt,.pdf',
+      limit: 1,
     },
     order: 1,
   },

diff --git a/web/src/utils/uploadLocal.ts b/web/src/utils/uploadLocal.ts
@@ -1,5 +1,3 @@
-import type { UploadRequestOptions } from 'element-plus'
-
 /**
  * MineAdmin is committed to providing solutions for quickly building web applications
  * Please view the LICENSE file that was distributed with this source code,
@@ -9,14 +7,14 @@ import type { UploadRequestOptions } from 'element-plus'
  * @Author X.Mo<[email protected]>
  * @Link   https://github.com/mineadmin
  */
-export function uploadLocal(options: UploadRequestOptions, url?: string = '/admin/attachment/upload', key?: string = 'file') {
+export function uploadLocal(options: any, url?: string, key?: string) {
   const upload = (formData: FormData) => {
-    return useHttp().post(url, formData)
+    return useHttp().post(url ?? '/admin/attachment/upload', formData)
   }
 
   return new Promise((resolve, reject) => {
     const formData = new FormData()
-    formData.append(key, options.file)
+    formData.append(key ?? 'file', options.file)
     upload(formData).then((res: Record<string, any>) => {
       res.code === 200 ? resolve(res) : reject(res)
     }).catch((err) => {

diff --git a/web/types/global.d.ts b/web/types/global.d.ts
@@ -38,12 +38,16 @@ interface ResponseStruct<T> {
 
 declare namespace Resources {
 
+  interface Args {
+    [key: string]: any
+  }
+
   interface Button {
     name: string
     label: string
     icon: string
     click?: (btn: Resources.Button, selected: any[]) => void
-    upload?: () => void
+    upload?: (files: FileList, args: Args) => void
     uploadConfig?: Record<string, any>
     order?: number
   }