feat: 文件上传

app/admin/layout.tsx

@@ -2,6 +2,8 @@ import DashHeader from '~/components/DashHeader'
 import { BaseSide } from '~/components/BaseSide'
 import Transitions, { Animate } from '~/components/Transitions'
 
+import { AntdRegistry } from '@ant-design/nextjs-registry'
+
 export default function AdminLayout({
   children,
 }: Readonly<{
@@ -18,7 +20,7 @@ export default function AdminLayout({
             </aside>
             <main className="flex w-full h-full flex-1 flex-col overflow-hidden p-2">
               <Animate className="flex-1">
-                {children}
+                <AntdRegistry>{children}</AntdRegistry>
               </Animate>
             </main>
           </div>

app/admin/upload/page.tsx

@@ -1,6 +1,8 @@
 import { Card, CardBody } from '@nextui-org/card'
+import FileUpload from '~/components/FileUpload'
 
 export default async function Upload() {
+
   return (
     <div className="flex flex-col space-y-2 h-full flex-1">
       <Card>
@@ -12,9 +14,7 @@ export default async function Upload() {
       </Card>
       <Card className="flex-1">
         <CardBody>
-          <p>
-            上传页面
-          </p>
+          <FileUpload />
         </CardBody>
       </Card>
     </div>

app/api/file-upload/route.ts

@@ -0,0 +1,46 @@
+import { fetchAListInfo } from '~/server/lib/query'
+
+export async function POST(request: Request) {
+  const formData = await request.formData()
+
+  const file = formData.get('file')
+  const storage = formData.get('storage')
+  const type = formData.get('type')
+  const mountPath = formData.get('mountPath') || ''
+
+  if (storage && storage.toString() === 's3') {
+    return Response.json({ url: '' })
+  } else {
+    const findConfig = await fetchAListInfo()
+    const alistToken = findConfig.find((item) => item.config_key === 'alist_token')?.config_value || '';
+    const alistUrl = findConfig.find((item) => item.config_key === 'alist_url')?.config_value || '';
+
+    const filePath = encodeURIComponent(`${mountPath.toString() === '/' ? '' : mountPath}/${type}/${file?.name}`)
+    console.log(filePath)
+    const data = await fetch(`${alistUrl}/api/fs/put`, {
+      method: 'PUT',
+      headers: {
+        'Authorization': alistToken.toString(),
+        'File-Path': filePath.toString(),
+      },
+      body: file,
+    }).then((res) => res.json())
+    if (data?.code === 200) {
+      const res = await fetch(`${alistUrl}/api/fs/get`, {
+        method: 'POST',
+        headers: {
+          'Authorization': alistToken.toString(),
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ path: decodeURIComponent(filePath) })
+      }).then((res) => res.json())
+      console.log(res)
+      if (res?.code === 200) {
+        return Response.json({ code: 200, message: '文件上传成功！', data: res?.data })
+      } else {
+        return Response.json({ code: 500, message: '文件路径获取失败！', data: null })
+      }
+    }
+  }
+  return Response.json({ code: 500, message: '文件上传失败！', data: null })
+}

components/FileUpload.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import React from 'react'
+import { InboxOutlined } from '@ant-design/icons'
+import type { UploadProps } from 'antd'
+import { Upload } from 'antd'
+import { toast } from 'sonner'
+
+export default function FileUpload() {
+
+  const { Dragger } = Upload;
+
+  async function onRequestUpload(option: any) {
+    const formData = new FormData()
+
+    formData.append('file', option.file)
+    formData.append('storage', 'alist')
+    formData.append('type', 'test')
+    formData.append('mountPath', '/')
+    const data = await fetch('/api/file-upload', {
+      method: 'POST',
+      body: formData
+    }).then((res) => res.json())
+    console.log(data)
+    if (data?.code === 200) {
+      option.onSuccess(option.file)
+      toast.success('文件上传成功！')
+    } else {
+      option.onError(option.file)
+      toast.error('文件上传失败！')
+    }
+  }
+
+  const props: UploadProps = {
+    listType: "picture",
+    name: 'file',
+    multiple: false,
+    maxCount: 1,
+    customRequest: (file) => onRequestUpload(file),
+    onChange: (event) => {
+      console.log(event)
+    }
+  }
+
+  return (
+    <Dragger {...props}>
+      <p className="ant-upload-drag-icon">
+        <InboxOutlined />
+      </p>
+      <p className="ant-upload-text">点击上传文件或拖拽文件到这里</p>
+      <p className="ant-upload-hint">
+        Vercel 等平台 Free 订阅限制上传大小 6M。
+      </p>
+    </Dragger>
+  )
+}

style/globals.css

@@ -15,3 +15,7 @@
     --background-end-rgb: 0, 0, 0;
   }
 }
+
+.ant-upload-list-item-progress {
+  display: none;
+}