重构图片上传

src/components/FileUpload/index.tsx

@@ -44,7 +44,7 @@ export default ({ dir, open, onCancel, onSuccess }: UploadFileProps) => {
             });
         }));
 
-        // 处理文件上传需要的格式
+        // 处理成后端需要的格式
         const formData = new FormData();
         formData.append("dir", dir);
         for (let i = 0; i < compressedFiles.length; i++) {
@@ -112,6 +112,7 @@ export default ({ dir, open, onCancel, onSuccess }: UploadFileProps) => {
                                     { value: 0.2, label: '0.2' },
                                     { value: 0.1, label: '0.1' },
                                 ]}
+                                defaultValue={1}
                                 placeholder="请选择图片压缩质量"
                                 className='min-w-44'
                             />

src/pages/Create/components/Editor/editor.scss

@@ -71,13 +71,12 @@
         @apply leading-9 mb-2;
 
         img {
-            // 图片模糊
             @apply rounded-xl cursor-pointer transition-all;
         }
     }
 
     strong {
-        @apply text-[15px];
+        @apply text-base;
     }
 
     tr,

src/pages/Create/components/Editor/index.scss

@@ -1,7 +1,8 @@
 @import url(./editor.scss);
 
 .bytemd {
-    height: 80vh;
+    // height: 80vh;
+    height: calc(100vh - 200px);
     border: none;
 
     .bytemd-toolbar {

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

@@ -1,42 +1,63 @@
-import { Editor } from '@bytemd/react'
+import { baseURL } from '@/utils/request';
-import 'bytemd/dist/index.css'
+import { useUserStore } from '@/stores';
-import highlight from '@bytemd/plugin-highlight'
+
+import { Editor } from '@bytemd/react';
+import 'bytemd/dist/index.css';
+import highlight from '@bytemd/plugin-highlight';
 import 'highlight.js/styles/vs2015.css';
-import "./index.scss"
 
-const plugins = [
+import './index.scss';
-    highlight()
+import axios from 'axios';
-]
+import { Spin } from 'antd';
-
+import { useState } from 'react';
-// import FileUpload from "@/components/FileUpload";
 
 interface Props {
-    value: string,
+    value: string;
-    setValue: (value: string) => void
+    setValue: (value: string) => void;
+    onChange: (value: string) => void;
 }
 
-const EditorMD = ({ value, setValue }: Props) => {
+const EditorMD = ({ value, setValue, onChange }: Props) => {
+    const store = useUserStore();
+    const [loading, setLoading] = useState(false)
+
+    const plugins = [
+        highlight()
+    ];
+
+    const uploadImages = async (files: File[]) => {
+        setLoading(true);
+
+        // 处理成后端需要的格式
+        const formData = new FormData();
+        formData.append("dir", "article");
+        for (let i = 0; i < files.length; i++) formData.append('files', files[i])
+
+        const { data: { code, data } } = await axios.post(`${baseURL}/file`, formData, {
+            headers: {
+                "Authorization": `Bearer ${store.token}`,
+                "Content-Type": "multipart/form-data"
+            }
+        });
+
+        setLoading(false);
+
+        // 返回图片信息数组
+        return data.map((url: string) => ({ url }));
+    }
+
     return (
         <>
-            <Editor
+            <Spin spinning={loading} tip="图片上传中...">
-                value={value}
+                <Editor
-                plugins={plugins}
+                    value={value}
-                onChange={setValue}
+                    plugins={plugins}
-            />
+                    onChange={onChange}
-
+                    uploadImages={uploadImages}
-            {/* 文件上传 */}
+                />
-            {/* <FileUpload
+            </Spin>
-                dir="article"
-                open={openUploadModalOpen}
-                onSuccess={(urls: string[]) => {
-                    urls.forEach((path: string) => {
-                        vd?.insertValue(`![${path}](${path})`);
-                    });
-                }}
-                onCancel={() => setOpenUploadModalOpen(false)}
-            /> */}
         </>
     );
 };
 
-export default EditorMD;
+export default EditorMD;

src/pages/Create/index.tsx

@@ -72,7 +72,6 @@ const CreatePage = () => {
   }, [content])
 
 
-
   // 解析接口数据
   const parsingData = async (command: string) => {
     const res = await fetch(`/ai/v1/chat/completions`, {
@@ -166,7 +165,7 @@ const CreatePage = () => {
       </Title>
 
       <Card className='[&>.ant-card-body]:!p-0 overflow-hidden rounded-xl'>
-        <Editor value={content} setValue={(value) => setContent(value)} />
+        <Editor value={content} setValue={(value) => setContent(value)} onChange={(value) => setContent(value)} />
 
         <Drawer
           title={id ? "编辑文章" : "发布文章"}