From 8543258c89ae412e9e8558510e44f24585b7cfb6 Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Fri, 22 Mar 2024 00:30:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/aside/comp/Upload.vue | 51 ++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/views/home/aside/comp/Upload.vue b/src/views/home/aside/comp/Upload.vue
index 7c4970f..f723701 100644
--- a/src/views/home/aside/comp/Upload.vue
+++ b/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 {