feat: 新增上传文件接口

src/api/axios.config.ts

@@ -2,7 +2,10 @@ import { ModuleTypeEnum } from '@/enums/httpEnum'
 
 // 接口白名单（免登录）
 export const fetchAllowList = [
-  `${ModuleTypeEnum.SYSTEM}/login`
+  // 登录
+  `${ModuleTypeEnum.SYSTEM}/login`,
+  // 预览获取数据
+  `${ModuleTypeEnum.PROJECT}/getData`,
 ]
 
 // 接口黑名单

src/api/path/photo.ts

@@ -1,3 +0,0 @@
-import { http } from '@/api/http'
-import { httpErrorHandle } from '@/utils'
-import { RequestHttpEnum, ModuleTypeEnum } from '@/enums/httpEnum'

src/api/path/project.ts

@@ -5,7 +5,7 @@ import { ContentTypeEnum, RequestHttpEnum, ModuleTypeEnum } from '@/enums/httpEn
 // * 项目列表
 export const projectListApi = async (data: object) => {
   try { 
-    const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.PROJECT}/list`, data);
+    const res = await http(RequestHttpEnum.GET)(`/api/goview/${ModuleTypeEnum.PROJECT}/list`, data);
     return res;
   } catch {
     httpErrorHandle();
@@ -15,7 +15,7 @@ export const projectListApi = async (data: object) => {
 // * 新增项目
 export const createProjectApi = async (data: object) => {
   try { 
-    const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/create`, data);
+    const res = await http(RequestHttpEnum.POST)(`/api/goview/${ModuleTypeEnum.PROJECT}/create`, data);
     return res;
   } catch {
     httpErrorHandle();
@@ -25,7 +25,7 @@ export const createProjectApi = async (data: object) => {
 // * 获取项目
 export const fetchProjectApi = async (data: object) => {
   try { 
-    const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.PROJECT}/getData`, data);
+    const res = await http(RequestHttpEnum.GET)(`/api/goview/${ModuleTypeEnum.PROJECT}/getData`, data);
     return res;
   } catch {
     httpErrorHandle();
@@ -35,7 +35,7 @@ export const fetchProjectApi = async (data: object) => {
 // * 保存项目
 export const saveProjectApi = async (data: object) => {
   try { 
-    const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/save/data`, data, ContentTypeEnum.FORM_URLENCODED);
+    const res = await http(RequestHttpEnum.POST)(`/api/goview/${ModuleTypeEnum.PROJECT}/save/data`, data, ContentTypeEnum.FORM_URLENCODED);
     return res;
   } catch {
     httpErrorHandle();
@@ -45,7 +45,7 @@ export const saveProjectApi = async (data: object) => {
 // * 修改项目基础信息
 export const updateProjectApi = async (data: object) => {
   try {
-    const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/edit`, data);
+    const res = await http(RequestHttpEnum.POST)(`/api/goview/${ModuleTypeEnum.PROJECT}/edit`, data);
     return res;
   } catch {
     httpErrorHandle();
@@ -56,7 +56,7 @@ export const updateProjectApi = async (data: object) => {
 // * 删除项目
 export const deleteProjectApi = async (data: object) => {
   try { 
-    const res = await http(RequestHttpEnum.DELETE)(`${ModuleTypeEnum.PROJECT}/delete`, data);
+    const res = await http(RequestHttpEnum.DELETE)(`/api/goview/${ModuleTypeEnum.PROJECT}/delete`, data);
     return res;
   } catch {
     httpErrorHandle();
@@ -66,7 +66,17 @@ export const deleteProjectApi = async (data: object) => {
 // * 修改发布状态 [-1未发布,1发布]
 export const changeProjectReleaseApi = async (data: object) => {
   try { 
-    const res = await http(RequestHttpEnum.PUT)(`${ModuleTypeEnum.PROJECT}/publish`, data);
+    const res = await http(RequestHttpEnum.PUT)(`/api/goview/${ModuleTypeEnum.PROJECT}/publish`, data);
+    return res;
+  } catch {
+    httpErrorHandle();
+  }
+}
+
+// * 上传文件
+export const uploadFile = async (data: object) => {
+  try { 
+    const res = await http(RequestHttpEnum.POST)(`oss/object/v2-cloud`, data, ContentTypeEnum.FORM_DATA);
     return res;
   } catch {
     httpErrorHandle();

src/api/path/system.api.ts

@@ -5,7 +5,7 @@ import { RequestHttpEnum, ModuleTypeEnum } from '@/enums/httpEnum'
 // * 登录
 export const loginApi = async (data: object) => {
   try {
-    const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.SYSTEM}/login`, data);
+    const res = await http(RequestHttpEnum.POST)(`/api/goview/${ModuleTypeEnum.SYSTEM}/login`, data);
     return res;
   } catch {
     httpErrorHandle();
@@ -15,7 +15,7 @@ export const loginApi = async (data: object) => {
 // * 登出
 export const logoutApi = async () => {
   try {
-    const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.SYSTEM}/logout`);
+    const res = await http(RequestHttpEnum.GET)(`/api/goview/${ModuleTypeEnum.SYSTEM}/logout`);
     return res;
   } catch(err) {
     httpErrorHandle();

src/settings/httpSetting.ts

@@ -1,2 +1,2 @@
 // 请求前缀
-export const axiosPre = '/goview/api/goview/'
+export const axiosPre = '/goview'

src/utils/file.ts

@@ -1,3 +1,49 @@
+import { Buffer } from "buffer"
+
+/**
+ * * file转url
+ */
+ export const fileToUrl = (file: File): string => {
+  const Url = URL || window.URL || window.webkitURL
+  const ImageUrl = Url.createObjectURL(file)
+  return ImageUrl
+}
+
+/**
+ * * url转file
+ */
+ export const urlToFile = (fileUrl: string, fileName = new Date().getTime()): File => {
+  const dataArr = fileUrl.split(',')
+  const mime = (dataArr as any[])[0].match(/:(.*);/)[1]
+  const originStr = atob(dataArr[1])
+  return new File([originStr], `${fileName}`, { type: mime })
+}
+
+/**
+ * * file转base64
+ * @param file 文件数据
+ * @param callback 回调函数 
+ */
+export const fileTobase64 = (file: File, callback: Function) => {
+  let reader = new FileReader()
+  reader.readAsDataURL(file)
+  reader.onload = function (e: ProgressEvent<FileReader>) {
+    if (e.target) {
+      let base64 = e.target.result
+      callback(base64)
+    }
+  }
+}
+
+/**
+ * * canvas转file
+ * @param canvas 
+ */
+export const canvastoFile = (canvas: HTMLCanvasElement) => {
+  const dataurl = canvas.toDataURL('image/png')
+  return urlToFile(dataurl)
+}
+
 /**
  * *获取上传的文件数据
  * @param { File } file 文件对象
@@ -38,7 +84,7 @@ export const downloadByA = (url: string, filename = new Date().getTime(), fileSu
 }
 
 /**
- * 下载数据
+ * * 下载数据
  * @param { string } content 数据内容
  * @param { ?string } filename 文件名称（默认随机字符）
  * @param { ?string } fileSuffix 文件名称（默认随机字符）
@@ -51,4 +97,4 @@ export const downloadTextFile = (
   // 字符内容转变成blob地址
   const blob = new Blob([content])
   downloadByA(URL.createObjectURL(blob), filename, fileSuffix)
-}
+}

src/utils/utils.ts

@@ -111,29 +111,6 @@ export const isMac = () => {
   return /macintosh|mac os x/i.test(navigator.userAgent)
 }
 
-/**
- * * file转url
- */
-export const fileToUrl = (file: File): string => {
-  const Url = URL || window.URL || window.webkitURL
-  const ImageUrl = Url.createObjectURL(file)
-  return ImageUrl
-}
-
-/**
- * * file转base64
- */
-export const fileTobase64 = (file: File, callback: Function) => {
-  let reader = new FileReader()
-  reader.readAsDataURL(file)
-  reader.onload = function (e: ProgressEvent<FileReader>) {
-    if (e.target) {
-      let base64 = e.target.result
-      callback(base64)
-    }
-  }
-}
-
 /**
  * * 挂载监听
  */

src/views/chart/hooks/useSync.hook.ts

@@ -1,5 +1,6 @@
 import { onUnmounted } from 'vue';
-import { getUUID, httpErrorHandle, fetchRouteParamsLocation } from '@/utils'
+import html2canvas from 'html2canvas'
+import { getUUID, httpErrorHandle, fetchRouteParamsLocation, canvastoFile } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum, ChartEditStoreEnum, ProjectInfoEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
@@ -9,7 +10,7 @@ import { saveInterval } from '@/settings/designSetting'
 // 接口状态
 import { ResultEnum } from '@/enums/httpEnum'
 // 接口
-import { saveProjectApi, fetchProjectApi } from '@/api/path/project'
+import { saveProjectApi, fetchProjectApi, uploadFile } from '@/api/path/project'
 // 画布枚举
 import { SyncEnum } from '@/enums/editPageEnum'
 
@@ -84,7 +85,7 @@ export const useSync = () => {
     chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, indexImage)
   }
 
-  // 数据获取
+  // * 数据获取
   const dataSyncFetch = async () => {
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
     try {
@@ -108,11 +109,20 @@ export const useSync = () => {
     }
   }
 
-  // 数据保存
+  // * 数据保存
   const dataSyncUpdate = async () => {
     if(!fetchRouteParamsLocation()) return
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
-    
+
+    // 获取缩略图片
+    const range = document.querySelector('.go-edit-range') as HTMLElement
+    const canvasImage: HTMLCanvasElement = await html2canvas(range)
+    const canvasFile = canvastoFile(canvasImage)
+    let uploadParams = new FormData()
+    uploadParams.append('object', canvasFile)
+    const uploadRes = await uploadFile(uploadParams)
+    console.log(uploadRes)
+
     let params = new FormData()
     params.append('projectId', fetchRouteParamsLocation())
     params.append('content', JSON.stringify(chartEditStore.getStorageInfo || {}))
@@ -129,7 +139,7 @@ export const useSync = () => {
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
   }
 
-  // 定时处理
+  // * 定时处理
   const intervalDataSyncUpdate = () => {
     // 定时获取数据
     const syncTiming = setInterval(() => {