feat:更新上传图片功能

src/apis/blog.ts

@@ -3,6 +3,18 @@ import { IBlog, IBlogCategory, IBlogComment, IBlogStats, IBlogVisit, INewBlog }
 
 import { IPageRecord } from '@/types'
 
+export const uploadBlogImageApi = (md5: string, form: FormData): Promise<string> =>
+  cloudService({
+    url: '/blog-api/blog/file/upload',
+    timeout: 10000,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    method: 'post',
+    params: { md5 },
+    data: form
+  })
+
 export const queryBlogApi = (currentPage: number, pageSize: number): Promise<IPageRecord<IBlog>> =>
   cloudService({
     url: '/blog-api/blog/all/page',

src/utils/index.ts

@@ -18,16 +18,6 @@ export const setActiveClass = (parentClassName: string, elementTag: string,
   currentElement.setAttribute('class', activeClassName)
 }
 
-/**
- * 文件服务器地址
- */
-export const fileServiceUrl = '/home-service/file'
-
-/**
- * 服务器文件路径根地址
- */
-export const serviceFileRootPath = '/home-service/'
-
 /**
  * 获取assets静态资源
  * @param url 路径

src/views/blog/detail[id].vue

@@ -43,16 +43,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { useBlogStore } from '@/store/blog.ts'
 import { MdEditor } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 import { ElLoading, ElMessage, FormInstance, FormRules } from 'element-plus'
 import { blogRules } from '@/utils/element/elRules.ts'
-import { useRouter, useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { validateBlogImage } from '@/utils/blog/blogUtil'
-import { doUploadFile } from 'vue3-common/utils/fileUtil'
-import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+import { getFileMd5 } from 'vue3-common/utils/fileUtil'
+import { uploadBlogImageApi } from '@/apis/blog'
 
 const rules = reactive<FormRules>(blogRules)
 
@@ -66,7 +66,6 @@ const focusCategoryEvent = async () => {
 }
 
 onMounted(async () => {
-  console.log('cxx')
   formRef.value?.clearValidate()
 
   const blogId = route.params.id as number
@@ -114,19 +113,25 @@ const onUploadImg = async (files: File[], callback) => {
   })
 
   if (validateBlogImage(files)) {
-    const result = await doUploadFile(fileServiceUrl, files[0], blogStore.blogImagePath, false)
-    // 显示在markdown中
-    // 注意这里需要是数组的形式
-    const urlArray = []
-    urlArray.push({
-      url: `${serviceFileRootPath}${result.url.replace(/\\/g, '/')}`,
-      alt: '暂无图片',
-      title: files[0].name
-    })
-    callback(urlArray)
-  }
+    try {
+      const formData = new FormData()
+      formData.append('file', files[0])
+      const md5 = await getFileMd5(files[0])
+      const fileUrl = await uploadBlogImageApi(md5, formData)
 
-  loading.close()
+      // 显示在markdown中
+      // 注意这里需要是数组的形式
+      const urlArray = []
+      urlArray.push({
+        url: `${window.location.origin}/${fileUrl}`,
+        alt: '暂无图片',
+        title: files[0].name
+      })
+      callback(urlArray)
+    } finally {
+      loading.close()
+    }
+  }
 }
 
 const backClick = () => {