前言:若项目中附件上传组件只能拿到文件的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();