From 4c75be67f272962a0b24079b259c8072888e00e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Mon, 17 Apr 2023 13:36:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/route.js         | 12 ++++++
 src/views/demo/upload/index.vue | 76 +++++++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 src/views/demo/upload/index.vue

diff --git a/src/views/demo/route.js b/src/views/demo/route.js
index 514d44b..22320bd 100644
--- a/src/views/demo/route.js
+++ b/src/views/demo/route.js
@@ -49,5 +49,17 @@ export default {
         keepAlive: true,
       },
     },
+    {
+      name: 'Upload',
+      path: 'upload',
+      component: () => import('./upload/index.vue'),
+      meta: {
+        title: '图片上传',
+        icon: 'mdi:upload',
+        role: ['admin'],
+        requireAuth: true,
+        keepAlive: true,
+      },
+    },
   ],
 }
diff --git a/src/views/demo/upload/index.vue b/src/views/demo/upload/index.vue
new file mode 100644
index 0000000..f26705e
--- /dev/null
+++ b/src/views/demo/upload/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <CommonPage>
+    <n-upload
+      class="p-20 text-center w-[75%] mx-auto"
+      :custom-request="handleUpload"
+      :show-file-list="false"
+      accept=".png,.jpg,.jpeg"
+      @before-upload="onBeforeUpload"
+    >
+      <n-upload-dragger>
+        <div class="f-c-c flex-col h-150">
+          <TheIcon icon="mdi:upload" size="68" class="mb-12 c-primary" />
+          <n-text class="text-14 c-gray"> 点击或者拖动文件到该区域来上传 </n-text>
+        </div>
+      </n-upload-dragger>
+    </n-upload>
+
+    <n-card v-if="imgList && imgList.length" class="mt-16 items-center">
+      <n-image-group>
+        <n-space justify="space-between" align="center">
+          <n-card v-for="(item, index) in imgList" :key="index" class="w-280 hover:card-shadow">
+            <div class="h-160 f-c-c">
+              <n-image width="200" :src="item.url" />
+            </div>
+            <n-space class="mt-16" justify="space-evenly">
+              <n-button dashed type="primary" @click="copy(item.url)"> url </n-button>
+              <n-button dashed type="primary" @click="copy(`![${item.fileName}](${item.url})`)">MD</n-button>
+              <n-button dashed type="primary" @click="copy(`&lt;img src=&quot;${item.url}&quot; /&gt;`)">img</n-button>
+            </n-space>
+          </n-card>
+          <div v-for="i in 4" :key="i" class="w-280" />
+        </n-space>
+      </n-image-group>
+    </n-card>
+  </CommonPage>
+</template>
+
+<script setup>
+import { useClipboard } from '@vueuse/core'
+defineOptions({ name: 'Upload' })
+
+const { copy, copied } = useClipboard()
+
+const imgList = reactive([
+  { url: 'https://qn.qszone.com/images/5c23d52f880511ebb6edd017c2d2eca2.jpg' },
+  { url: 'https://qn.qszone.com/images/5c23d52f880511ebb6edd017c2d2eca2.jpg' },
+  { url: 'https://qn.qszone.com/images/5c23d52f880511ebb6edd017c2d2eca2.jpg' },
+  { url: 'https://qn.qszone.com/images/5c23d52f880511ebb6edd017c2d2eca2.jpg' },
+])
+
+watch(copied, (val) => {
+  val && $message.success('已复制到剪切板')
+})
+
+function onBeforeUpload({ file }) {
+  if (!file.file?.type.startsWith('image/')) {
+    $message.error('只能上传图片')
+    return false
+  }
+  return true
+}
+
+async function handleUpload({ file, onFinish, onError }) {
+  if (!file || !file.type) {
+    $message.error('请选择文件')
+  }
+
+  // 模拟上传
+  $message.loading('上传中...')
+  setTimeout(() => {
+    $message.success('上传成功')
+    imgList.push({ fileName: file.name, url: URL.createObjectURL(file.file) })
+    onFinish()
+  }, 1500)
+}
+</script>