完成文章页文件上传

src/components/FileUpload/index.tsx

@@ -9,7 +9,7 @@ import Compressor from 'compressorjs';
 interface UploadFileProps {
     dir: FileDir,
     open: boolean,
-    onSuccess: (urls: string) => void,
+    onSuccess: (urls: string[]) => void,
     onCancel: () => void
 }
 
@@ -66,7 +66,7 @@ export default ({ dir, open, onCancel, onSuccess }: UploadFileProps) => {
         // 把数据写入到剪贴板
         await navigator.clipboard.writeText(data.join("\n"));
         message.success(`🎉 文件上传成功，URL链接已复制到剪贴板`);
-        onSuccess(data.join("\n"));
+        onSuccess(data);
         setIsLoading(false);
         onCloseModel();
     };

src/pages/Create/components/VditorMD/index.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import Vditor from "vditor";
 import "vditor/dist/index.css";
 import "./index.scss"
+import FileUpload from "@/components/FileUpload";
 
 const toolbar = [
     {
@@ -177,6 +178,7 @@ interface VditorProps {
 }
 
 const VditorEditor = ({ value, getValue }: VditorProps) => {
+    const [openUploadModalOpen, setOpenUploadModalOpen] = useState(false);
     const [vd, setVd] = useState<Vditor>();
 
     useEffect(() => {
@@ -191,11 +193,52 @@ const VditorEditor = ({ value, getValue }: VditorProps) => {
                 delay: 500
             },
             toolbar,
+            // upload: {
+            //     handler: async (files) => {
+            //         console.log(files, 333);
+
+            //         const formData = new FormData();
+            //         files.forEach(file => {
+            //             formData.append('files', file);
+            //         });
+
+            //         // 添加额外参数
+            //         formData.append('dir', 'article');
+
+            //         const res = await fetch(`${baseURL}/file`, {
+            //             method: "POST",
+            //             body: formData,
+            //             headers: {
+            //                 "Authorization": `Bearer ${store.token}`
+            //             }
+            //         });
+
+            //         const { code, message, data } = await res.json();
+            //         if (code !== 200) return message.error("文件上传失败：" + message);
+
+            //         // 插入到编辑器中
+            //         data.forEach((path: string) => {
+            //             vditor.insertValue(`![${path}](${path})`);
+            //         });
+            //     },
+            // },
             input: (value) => {
                 // 把数据传给父组件
                 getValue(value)
             },
             after: () => {
+                // 获取文件上传按钮
+                const uploadButton = document.querySelector('.vditor-toolbar [data-type="upload"]')!;
+
+                // 添加点击事件监听器
+                uploadButton.addEventListener('click', (e) => {
+                    e.preventDefault()
+                    console.log('文件上传图标被点击');
+                    // 在这里添加你的自定义逻辑
+
+                    setOpenUploadModalOpen(true)
+                });
+
                 setVd(vditor);
             }
         })
@@ -213,7 +256,23 @@ const VditorEditor = ({ value, getValue }: VditorProps) => {
         }
     }, [value, vd]);
 
-    return <div id="vditor" className="vditor" />;
+    return (
+        <>
+            <div id="vditor" className="vditor" />
+
+            {/* 文件上传 */}
+            <FileUpload
+                dir="article"
+                open={openUploadModalOpen}
+                onSuccess={(urls: string[]) => {
+                    urls.forEach((path: string) => {
+                        vd?.insertValue(`![${path}](${path})`);
+                    });
+                }}
+                onCancel={() => setOpenUploadModalOpen(false)}
+            />
+        </>
+    );
 };
 
 export default VditorEditor;

src/pages/Create/index.tsx

@@ -24,7 +24,12 @@ const CreatePage = () => {
   }
 
   // 保存文章
-  const baseBtn = () => {
+  const saveBtn = () => {
+    content.trim().length >= 1 ? setPublishOpen(true) : message.error('请输入文章内容')
+  }
+
+  // 下一步
+  const nextBtn = () => {
     content.trim().length >= 1 ? setPublishOpen(true) : message.error('请输入文章内容')
   }
 
@@ -128,9 +133,13 @@ const CreatePage = () => {
         <div className='absolute top-[4.5%] right-[5%] z-10 flex space-x-4'>
           <Dropdown.Button menu={{ items }}>创作神器</Dropdown.Button>
 
-          <Button type="primary" className='w-full flex justify-between' onClick={baseBtn} >
+          <Button className='w-full flex justify-between' onClick={saveBtn} >
             <BiSave className='text-base' /> 保存
           </Button>
+
+          <Button type="primary" className='w-full flex justify-between' onClick={nextBtn} >
+            <BiSave className='text-base' /> 下一步
+          </Button>
         </div>
 
         <VditorEditor value={content} getValue={getVditorData} />

src/pages/Setup/components/Layout/index.tsx

@@ -115,7 +115,7 @@ const LayoutPage = () => {
             <FileUpload
                 dir="swiper"
                 open={isModalOpen}
-                onSuccess={(url: string) => setLayout({ ...layout, swiperImage: url })}
+                onSuccess={(url: string[]) => setLayout({ ...layout, swiperImage: url.join("\n") })}
                 onCancel={() => setIsModalOpen(false)}
             />
         </>

src/pages/Swiper/index.tsx

@@ -160,7 +160,7 @@ const SwiperPage = () => {
             <FileUpload
                 dir="swiper"
                 open={isModalOpen}
-                onSuccess={(url: string) => form.setFieldValue("image", url)}
+                onSuccess={(url: string[]) => form.setFieldValue("image", url.join("\n"))}
                 onCancel={() => setIsModalOpen(false)}
             />
         </>