JS 图片base64与file_blob的相互转换的方法实现

/**
 * Base64 转 File
 * @param base64 String base64格式字符串
 * @param filename String 文件名称或者文件路径
 * @param contentType String file对象的文件类型，如："image/png"
 */
 export function base64ToFile(base64, filename, contentType){
     var arr = base64.split(',')  //去掉base64格式图片的头部
     var bstr = atob(arr[1])   //atob()方法将数据解码
     var leng = bstr.length
     var u8arr = new Uint8Array(leng)
     while(leng--){
        u8arr[leng] =  bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码
     }
     return new File([u8arr], filename, {type:contentType}) 
 }

/**
* Base64转Blob
* @param base64 String base64格式字符串
* @param contentType String blob对象的文件类型，如："image/png"
*/
function base64ToBlob(base64, contentType){
	var arr = base64.split(',')  //去掉base64格式图片的头部
	var bstr = atob(arr[1])   //atob()方法将数据解码
	var leng = bstr.length
	var u8arr = new Uint8Array(leng)
	while(leng--){
		u8arr[leng] =  bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码
	}
	var blob = new Blob([u8arr],{type:contentType})
	var blobImg = {}
	blobImg.url = URL.createObjectURL(blob )  //创建URL,
	blobImg.name = new Date().getTime() + '.png'
	return blobImg
}

/**
 * File 转 Base64
 * @param file Object 文件对象流
 */
 export function fileToBase64(file){
	return new Promise((resolve) => {
		var reader = new FileReader()
		reader.readAsDataURL(file)  
		//读取后，result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
		reader.onload = function(e){
			resolve(e.target.result)
		}
     })
 }

/**
* Blob 转 Base64
* @param blob Object blob对象
*/
export function blobToBase64(blob){
	return new Promise((resolve) => {
		var reader = new FileReader()
		reader.readAsDataURL(blob)  
		//读取后，result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
		reader.onload = function(e){
			resolve(e.target.result)
		}
     })
}

// 注意引入路径不要出错
import { base64ToFile, base64ToBlob, fileToBase64, blobToBase64 } from '@/utils/xxx.js'

const file = base64ToFile(base64, 'picture', 'image/png')
// 输出File对象
console.log(file)

const blob = base64ToBlob(base64, 'image/png')
// 输出blob对象
console.log(blob)

fileToBase64(file).then(res => {
	// 输出图片base64
	console.log(res)
}).catch(err => {
	console.log(err)
})

blobToBase64(blob).then(res => {
	// 输出图片base64
	console.log(res)
}).catch(err => {
	console.log(err)
})