添加上传图片

.env

@@ -0,0 +1 @@
+WEB_URL=http://localhost:8000

.env.production

@@ -0,0 +1 @@
+WEB_URL=https://web.xuyue.cc

components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     Editor: typeof import('./src/components/Editor.vue')['default']
     Editors: typeof import('./src/components/Editors.vue')['default']
     Login: typeof import('./src/components/Login.vue')['default']
+    MarkdownEditor: typeof import('./src/components/dashboard/MarkdownEditor.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
     NameWithFilter: typeof import('./src/components/submissions/NameWithFilter.vue')['default']
     NButton: typeof import('naive-ui')['NButton']

rsbuild.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
     },
   },
   output: {
-    polyfill: "usage"
+    polyfill: "usage",
   },
   tools: {
     rspack: {
@@ -26,6 +26,14 @@ export default defineConfig({
       ],
     },
   },
+  server: {
+    proxy: {
+      "/media": {
+        target: process.env.WEB_URL,
+        changeOrigin: true,
+      },
+    },
+  },
   performance: {
     chunkSplit: {
       strategy: "split-by-experience",

src/api.ts

@@ -131,3 +131,14 @@ export const Submission = {
     return res.data
   },
 }
+
+export const Helper = {
+  async upload(file: File) {
+    const form = new window.FormData()
+    form.append("image", file)
+    const res = await http.post("/upload/", form, {
+      headers: { "content-type": "multipart/form-data" },
+    })
+    return !!res.data.url ? res.data.url : ""
+  },
+}

src/components/dashboard/MarkdownEditor.vue

@@ -0,0 +1,35 @@
+<template>
+  <MdEditor v-bind="props" v-model="modelValue" @upload-img="uploadImg" />
+</template>
+<script lang="ts" setup>
+import { MdEditor } from "md-editor-v3"
+//@ts-ignore
+import "md-editor-v3/lib/style.css"
+import { Helper } from "../../api"
+import { useMessage } from "naive-ui"
+
+const message = useMessage()
+
+const modelValue = defineModel<string>()
+
+const props = defineProps()
+
+const uploadImg = async (files: File[], callback: (urls: string[]) => void) => {
+  try {
+    const res = await Promise.all(
+      files.map(async (file) => {
+        const path = await Helper.upload(file)
+        if (!path) {
+          message.error("图片上传失败")
+          return ""
+        }
+        return path
+      }),
+    )
+    callback(res.filter((url) => url !== ""))
+  } catch (err) {
+    message.error("图片上传失败")
+    callback([])
+  }
+}
+</script>

src/pages/Tutorial.vue

@@ -58,7 +58,10 @@
             </n-button>
           </n-form-item>
         </n-form>
-        <MdEditor style="height: calc(100vh - 90px)" v-model="tutorial.content" />
+        <MarkdownEditor
+          style="height: calc(100vh - 90px)"
+          v-model="tutorial.content"
+        />
       </n-flex>
     </n-gi>
   </n-grid>
@@ -70,9 +73,7 @@ import { Icon } from "@iconify/vue"
 import { Tutorial } from "../api"
 import type { TutorialSlim } from "../utils/type"
 import { useDialog, useMessage } from "naive-ui"
-import { MdEditor } from "md-editor-v3"
-//@ts-ignore
-import "md-editor-v3/lib/style.css"
+import MarkdownEditor from "../components/dashboard/MarkdownEditor.vue"
 
 const route = useRoute()
 const router = useRouter()