Sfoglia il codice sorgente

fix: 修改自动保存预览图无法存储的问题

奔跑的面条 3 anni fa
parent
commit
ba20316761
2 ha cambiato i file con 22 aggiunte e 9 eliminazioni
  1. 18 2
      src/utils/file.ts
  2. 4 7
      src/views/chart/hooks/useSync.hook.ts

+ 18 - 2
src/utils/file.ts

@@ -1,4 +1,20 @@
-import { Buffer } from "buffer"
+/**
+ * * base64转file
+ * @param dataurl 
+ * @param fileName 
+ * @returns 
+ */
+export const base64toFile = (dataurl: string, fileName: string) => {
+  let dataArr = dataurl.split(","),
+  mime = (dataArr as any[])[0].match(/:(.*?);/)[1],
+  bstr = atob(dataArr[1]),
+  n = bstr.length,
+  u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], fileName, { type: mime });
+}
 
 /**
  * * file转url
@@ -16,7 +32,7 @@ import { Buffer } from "buffer"
   const dataArr = fileUrl.split(',')
   const mime = (dataArr as any[])[0].match(/:(.*);/)[1]
   const originStr = atob(dataArr[1])
-  return new File([originStr], `${fileName}.png`, { type: mime })
+  return new File([originStr], `${fileName}`, { type: mime })
 }
 
 /**

+ 4 - 7
src/views/chart/hooks/useSync.hook.ts

@@ -1,6 +1,6 @@
 import { onUnmounted } from 'vue';
 import html2canvas from 'html2canvas'
-import { getUUID, httpErrorHandle, fetchRouteParamsLocation, canvastoFile } from '@/utils'
+import { getUUID, httpErrorHandle, fetchRouteParamsLocation, base64toFile } 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'
@@ -117,19 +117,16 @@ export const useSync = () => {
     // 获取缩略图片
     const range = document.querySelector('.go-edit-range') as HTMLElement
     const canvasImage: HTMLCanvasElement = await html2canvas(range)
-    const canvasFile = canvastoFile(canvasImage, `${fetchRouteParamsLocation()}_index_preview`)
 
     // 上传预览图
     let uploadParams = new FormData()
-    uploadParams.append('object', canvasFile)
+    uploadParams.append('object', base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`))
     const uploadRes:any = await uploadFile(uploadParams)
-    console.log(uploadRes)
-
     // 保存预览图
-    if(uploadRes?.data === ResultEnum.SUCCESS) {
+    if(uploadRes.code === ResultEnum.SUCCESS) {
       await updateProjectApi({
         id: fetchRouteParamsLocation(),
-        updateProjectApi: uploadRes.url
+        indexImage: uploadRes.data.objectContent.httpRequest.uri
       })
     }