mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 保存预览图

Browse Source
This commit is contained in:
奔跑的面条 2022-05-28 11:50:17 +08:00
parent efd9228cc9
commit d0d5f5b77d
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/utils/file.ts
View File

@ -12,11 +12,11 @@ import { Buffer } from "buffer"
/** /**
* * url转file * * 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 dataArr = fileUrl.split(',')
const mime = (dataArr as any[])[0].match(/:(.*);/)[1] const mime = (dataArr as any[])[0].match(/:(.*);/)[1]
const originStr = atob(dataArr[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 * * canvas转file
* @param canvas * @param canvas
*/ */
export const canvastoFile = (canvas: HTMLCanvasElement) => { export const canvastoFile = (canvas: HTMLCanvasElement, name?: string) => {
const dataurl = canvas.toDataURL('image/png') const dataurl = canvas.toDataURL('image/png')
return urlToFile(dataurl) return urlToFile(dataurl, name)
} }
/** /**

17
src/views/chart/hooks/useSync.hook.ts
View File

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