文件格式相互转换(base64转File等)

前言:若项目中附件上传组件只能拿到文件的base64编码,而后台要的是File对象,在没办法使用其他上传组件的情况下,可以在拿到base64编码后转换成后台需要的格式。
附:图片转BASE64编码工具

// 定义下文需要用到的变量
// 文件base64格式的字符串
let _base64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgAB...";
let _fileObj = null; // File对象
let _blobObj = null; // Blob对象
let fileName = "图片1.jpg"; // 文件名
let opType = _base64.split(";base64")[0].slice(5); // 文件类型:image/jpeg

一、base64转为File对象

function getFileFromBase64 (data) {
	const dataArr = data.split(",");
	const byteString = atob(dataArr[1]);
	const options = {
	   type: opType,
	   endings: "native"
	}
	const u8Arr = new Uint8Array(byteString.length);
	for(let i = 0; i < byteString.length; i++) {
	   u8Arr[i] = byteString.charCodeAt(i);
	}
	_fileObj = new File([u8Arr], fileName, options);
}
getFileFromBase64(_base64);
console.log(_fileObj)
/* File {name: '图片1.jpg', lastModified: 1665298724139, lastModifiedDate: Sun Oct 09 2022 14:58:44 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 85713, …} */

二、base64 转成blob

function getBlobFromBase64 (data) {
	 const dataArr = data.split(",");
	 const byteString = atob(dataArr[1]);
	 var ab = new Uint8Array(byteString.length);
	 for(var i = 0; i < byteString.length; i++) {
	     ab[i] = byteString.charCodeAt(i);
	 }
	 _blobObj = new Blob([ab], { type: opType });
}
getBlobFromBase64(_base64, '图片1.jpg');
console.log(_blobObj)
/* Blob {size: 85713, type: 'image/jpeg'} */

三、File对象转为base64

function getBase64FromFile (file) {
	 let reader = new FileReader();
	 reader.readAsDataURL(file);
	 // 因为FileReader的操作都是异步的,所以需要在他自身的处理事件上边回调获取
	 reader.onload = () => {
	     console.log(reader.result)
	     // data:image/jpeg;base64,/9j/4AAQSkZJRgAB...
	     console.log(reader.result === _base64); // true
	 }
}
getBase64FromFile(_fileObj);
// _fileObj为上文base64转为File对象的值,将_fileObj再转为base64与原值一致

四、blob与ArrayBuffer相互转换

function getBufferFromBase64 () {
	// 将blob转为ArrayBuffer
	let reader = new FileReader();
	reader.readAsArrayBuffer(_blobObj);
	reader.onload = function (res) {
		console.log(res.currentTarget.result); // ArrayBuffer(85713)
	    // 将ArrayBuffer转为blob
	    console.log(new Blob([res.currentTarget.result], {type: opType}));
	    // Blob {size: 85713, type: 'image/jpeg'}
	}
}
getBufferFromBase64();

你可能感兴趣的:(js,javascript,前端,js)