feat: 保存预览图

src/utils/file.ts

@@ -12,11 +12,11 @@ import { Buffer } from "buffer"
 /**
  * * url转file
  */
- export const urlToFile = (fileUrl: string, fileName = new Date().getTime()): 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 })
+  return new File([originStr], `${fileName}.png`, { type: mime })
 }
 
 /**
@@ -39,9 +39,9 @@ export const fileTobase64 = (file: File, callback: Function) => {
  * * canvas转file
  * @param canvas 
  */
-export const canvastoFile = (canvas: HTMLCanvasElement) => {
+export const canvastoFile = (canvas: HTMLCanvasElement, name?: string) => {
   const dataurl = canvas.toDataURL('image/png')
-  return urlToFile(dataurl)
+  return urlToFile(dataurl, name)
 }
 
 /**

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

@@ -10,7 +10,7 @@ import { saveInterval } from '@/settings/designSetting'
 // 接口状态
 import { ResultEnum } from '@/enums/httpEnum'
 // 接口
-import { saveProjectApi, fetchProjectApi, uploadFile } from '@/api/path/project'
+import { saveProjectApi, fetchProjectApi, uploadFile, updateProjectApi } from '@/api/path/project'
 // 画布枚举
 import { SyncEnum } from '@/enums/editPageEnum'
 
@@ -117,12 +117,23 @@ export const useSync = () => {
     // 获取缩略图片
     const range = document.querySelector('.go-edit-range') as HTMLElement
     const canvasImage: HTMLCanvasElement = await html2canvas(range)
-    const canvasFile = canvastoFile(canvasImage)
+    const canvasFile = canvastoFile(canvasImage, `${fetchRouteParamsLocation()}_index_preview`)
+
+    // 上传预览图
     let uploadParams = new FormData()
     uploadParams.append('object', canvasFile)
-    const uploadRes = await uploadFile(uploadParams)
+    const uploadRes:any = await uploadFile(uploadParams)
     console.log(uploadRes)
 
+    // 保存预览图
+    if(uploadRes?.data === ResultEnum.SUCCESS) {
+      await updateProjectApi({
+        id: fetchRouteParamsLocation(),
+        updateProjectApi: uploadRes.url
+      })
+    }
+
+    // 保存数据
     let params = new FormData()
     params.append('projectId', fetchRouteParamsLocation())
     params.append('content', JSON.stringify(chartEditStore.getStorageInfo || {}))