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 * * file转url
@ -16,7 +32,7 @@ import { Buffer } from "buffer"
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}.png`, { type: mime }) return new File([originStr], `${fileName}`, { type: mime })
} }
/** /**

View File

@ -1,6 +1,6 @@
import { onUnmounted } from 'vue'; import { onUnmounted } from 'vue';
import html2canvas from 'html2canvas' 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 { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasTypeEnum, ChartEditStoreEnum, ProjectInfoEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d' import { EditCanvasTypeEnum, ChartEditStoreEnum, ProjectInfoEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
@ -117,19 +117,16 @@ 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, `${fetchRouteParamsLocation()}_index_preview`)
// 上传预览图 // 上传预览图
let uploadParams = new FormData() let uploadParams = new FormData()
uploadParams.append('object', canvasFile) uploadParams.append('object', base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`))
const uploadRes:any = await uploadFile(uploadParams) const uploadRes:any = await uploadFile(uploadParams)
console.log(uploadRes)
// 保存预览图 // 保存预览图
if(uploadRes?.data === ResultEnum.SUCCESS) { if(uploadRes.code === ResultEnum.SUCCESS) {
await updateProjectApi({ await updateProjectApi({
id: fetchRouteParamsLocation(), id: fetchRouteParamsLocation(),
updateProjectApi: uploadRes.url indexImage: uploadRes.data.objectContent.httpRequest.uri
}) })
} }