feat: 增加拖拽上传文件功能

src/views/home/aside/comp/Upload.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import type { GlobalThemeOverrides, UploadCustomRequestOptions } from 'naive-ui'
-import { computed, ref, unref } from 'vue'
-import { useElementHover } from '@vueuse/core'
-import { useThemeVars } from 'naive-ui'
 import { upload } from '@/api/home/main'
-import { getImgUrl } from '@/utils/urlUtils'
-import { useConfig } from '@/store/modules/asideConfig'
 import { hideDownload } from '@/utils/image'
+import { getImgUrl } from '@/utils/urlUtils'
+import { useElementHover } from '@vueuse/core'
+import type { GlobalThemeOverrides, UploadCustomRequestOptions } from 'naive-ui'
+import { useThemeVars } from 'naive-ui'
+import { computed, ref } from 'vue'
 
 const props = defineProps<{
   value: string
@@ -16,9 +15,9 @@ const emit = defineEmits<{
   (e: 'update:value', value: string): void
 }>()
 
-const configStore = useConfig()
 
 const figureUrl = ref(props.value)
+const uploadRef = ref(null);
 
 async function customRequest(data: UploadCustomRequestOptions) {
   const result = await upload({ file: data.file.file as any })
@@ -39,6 +38,7 @@ function clearHandler(event: MouseEvent) {
   event.stopImmediatePropagation()
   event.stopPropagation()
   figureUrl.value = ''
+  emit('update:value', '')
 }
 
 function previewHandler(event: MouseEvent) {
@@ -60,11 +60,41 @@ const imageGroupThemeOverrides = computed(() => {
   }
   return themeOverrides
 })
+
+// 拖拽经过其他元素时触发
+const handleDragOver = (e) => {
+  e.preventDefault(); // 阻止默认事件
+  e.dataTransfer.dropEffect = 'copy'; // 设置拖拽效果为复制
+};
+
+// 开始拖拽时触发
+const handleDragLeave = (e) => {
+  e.preventDefault(); // 阻止默认事件
+};
+
+// 停止拖拽时触发
+const handleDrop = (e) => {
+  e.preventDefault(); // 阻止默认事件
+  const files = e.dataTransfer.files;
+  const draggedElement = e.dataTransfer.getData('text/plain');
+  if (files.length === 0) {
+  fetch(draggedElement)
+    .then(res => res.blob())
+    .then(async blob => {
+      const file = new File([blob], String(new Date().getTime()) + '.jpg', { type: 'image/jpeg' });
+      const result = await upload({ file: file as any })
+      const imgUrl = getImgUrl(result.data)
+      figureUrl.value = imgUrl
+      emit('update:value', result.data)
+    });
+  }
+};
 </script>
 
 <template>
   <n-space>
-    <n-upload directory-dnd :show-file-list="false" accept=".png,.jpg,.bmp" :custom-request="customRequest">
+    <n-upload ref="uploadRef" directory-dnd :show-file-list="false" accept=".png,.jpg,.bmp"
+      :custom-request="customRequest" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
       <n-upload-dragger class="wrapper">
         <div v-show="!showFigure" class="wrapper-dragger">
           <SvgIcon size="30" name="upload" />
@@ -72,7 +102,8 @@ const imageGroupThemeOverrides = computed(() => {
           <span class="wrapper-tip2">上传格式为：.png .jpg .bmp 20M以内</span>
         </div>
         <div v-show="showFigure" ref="figureRef" class="wrapper-figure">
-          <n-image ref="imageRef" :img-props="{ onClick: hideDownload }" :theme-overrides="imageGroupThemeOverrides" width="288" height="116" :src="figureUrl" />
+          <n-image ref="imageRef" :img-props="{ onClick: hideDownload }" :theme-overrides="imageGroupThemeOverrides"
+            width="288" height="116" :src="figureUrl" />
           <div v-show="figureHovered" class="wrapper-figure-tools">
             <SvgIcon size="28" name="view" @click="previewHandler" />
             <div class="wrapper-figure-line" />
@@ -133,7 +164,7 @@ const imageGroupThemeOverrides = computed(() => {
       justify-content: center;
       width: 100%;
       height: 100%;
-      background-color:rgba(102, 102, 102, 0.2)
+      background-color: rgba(102, 102, 102, 0.2)
     }
 
     &-line {