Vue页面png图片的base64格式url转file文件保存后台

convertBase64UrlToBlob(urlData) {
	const bytes = window.atob(urlData.split(',')[1]) // 去掉url的头,并转换为byte

	// 处理异常,将ascii码小于0的转换为大于0
	const ab = new ArrayBuffer(bytes.length)
	const ia = new Uint8Array(ab)
	for ( let i = 0; i < bytes.length; i++) {
		ia[i] = bytes.charCodeAt(i)
	}
	return new Blob([ia], { type: 'image/png'})
}
blobToFile(theBlob, fileName) {
	theBlob.lastModifiedDate = new Date()
	theBlob.name = fileName
	return theBlob
}
SavePng(datauri, fileName, tabId, fieldId) {
	// datauri是base64格式url地址,转换必传
	// fileName是文件名 (xxx.png)
	// tabId和fieldId是我后端需要携带的参数,具体情况视项目而定
	var self = this
	const form = document.forms[0]
	const formData = new FormData(form)
	const blob = self.convertBase64UrlToBlob(datauri)
	const file = self.blobToFile(blob, fileName)
	formData.append('tabId', tabId)
	formData.append('fieldId', fieldId)
	formData.append('file', file)
	
	...... // 发请求将formData保存后台
}

调用 : this.SavePng(url, 'xxx.png', '1', '1') // 后面的两个参数不需要可以不用传

这是我在项目中遇到的需求,将antv/x6的流程图保存后台,点击导出word文件时,后端将图片放到word文件然后导出.
方法是看了别人的文章,不记得是哪篇去了,记录一下用法