feat: md 图片上传

src/api/module/eam/device/document.ts

@@ -98,3 +98,13 @@ export function updateMarkdown(data: MarkdownVO) {
     data: data,
   })
 }
+
+export function createImage(data: any) {
+  return documentServer({
+    url: '/image/upload',
+    method: 'post',
+    data,
+    headers: { 'Content-Type': 'multipart/form-data' },
+    timeout: 0,
+  })
+}

src/pages/fileDoc/components/markdownDrawer.vue

@@ -11,7 +11,12 @@
       <div class="header">
         <span>{{ data.fileName }}</span>
         <div>
-          <EDFSButton innerText="保存为草稿" type="info" v-if="!isRootMd" @click="onSave(1)" />
+          <EDFSButton
+            innerText="保存为草稿"
+            type="info"
+            v-if="!isRootMd"
+            @click="onSave(1)"
+          />
           <EDFSButton innerText="发布文章" type="primary" @click="onSave(0)" />
         </div>
       </div>
@@ -27,7 +32,7 @@ import { isResError, useMessage } from '@/hooks/useMessage'
 import { cloneDeep } from 'lodash'
 import EDFSButton from '@/components/dashboard/Edfs-button/index.vue'
 import Vditor from 'vditor'
-import { type ContentType } from '@/api/module/eam/device/document'
+import { createImage, type ContentType } from '@/api/module/eam/device/document'
 import 'vditor/dist/index.css'
 import { vditorToolbar } from '../utils'
 interface Props {
@@ -81,6 +86,34 @@ function initEditor() {
     after: () => {
       contentEditor.value?.setValue(props?.data?.content ?? '')
     },
+    upload: {
+      url: ' ',
+      accept: 'image/*',
+      multiple: false,
+      handler: async files => {
+        const data = new FormData()
+        data.append('file', files[0])
+        data.append('name', files[0].name)
+        // 校验文件类型 智能上传图片
+        if (!files[0].type.includes('image')) {
+          message.error('请上传图片')
+          return null
+        }
+
+        const res = await createImage(data)
+        if (isResError(res)) {
+          message.error('上传失败')
+          return null
+        }
+        const { url } = res.data
+        if (!url) {
+          message.success('上传失败，图片路径未找到!')
+          return null
+        }
+        contentEditor.value?.insertValue(`![image](${url})`)
+        return null
+      },
+    },
   })
 }
 

src/pages/fileDoc/utils.ts

@@ -28,6 +28,7 @@ export const vditorToolbar = [
   'line',
   'quote',
   'list',
+  'upload',
   'ordered-list',
   'check',
   'outdent',
@@ -46,3 +47,22 @@ export const vditorToolbar = [
   'redo',
   'fullscreen',
 ]
+
+// 拼接前缀函数
+function addPrefixToImages(str: string, prefix: string) {
+  return str.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, url) => {
+    // 检查是否已经有前缀，避免重复拼接
+    if (!url.startsWith(prefix)) {
+      return `![${alt}](${prefix}/${url.replace(/^\//, '')})`
+    }
+    return match
+  })
+}
+
+// 去除前缀函数
+function removePrefixFromImages(str: string, prefix: string) {
+  const prefixPattern = new RegExp(`^${prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}/?`)
+  return str.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, url) => {
+    return `![${alt}](${url.replace(prefixPattern, '')})`
+  })
+}