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

This commit is contained in:
奔跑的面条 2022-05-28 15:46:07 +08:00
parent 437dd1c411
commit ba20316761
2 changed files with 22 additions and 9 deletions

View File

@ -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 })
}
/**

View File

@ -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
})
}