feat: 图片上传

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,
+      },
+    },
   ],
 }

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>