文件格式相互转换（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转为ArrayBufferlet reader = new FileReader();reader.readAsArrayBuffer(_blobObj);reader.onload = function (res) {console.log(res.currentTarget.result); // ArrayBuffer(85713)// 将ArrayBuffer转为blobconsole.log(new Blob([res.currentTarget.result], {type: opType}));// Blob {size: 85713, type: 'image/jpeg'}}
}
getBufferFromBase64();

文件格式相互转换（base64转File等）相关推荐

前端文件格式转换,base64转为file,file转为bolb等
function fileToBase64(file,callback){ //file转bse64 let reader = new FileReader(); reader.readAsDataU ...
将图片（路径）转换为Base64 和将base64转换为file类型
var image={/* 将图片(路径)转换为Base64 */getBase64FromImageURL(url, callback) {var canvas = document.createE ...
html5 文件转byte[],JS 文件base64、File、Blob、ArrayBuffer互转
二进制互转 1. file对象转base64let reader = new FileReader(); reader.readAsDataURL(file[0]) console.log(reade ...
【JS实战】base64转换为file文件类型（上传头像为例子）
base64转换为file类型点击头像,选择文件点击选取时,获取base64文件这里使用了Vue-ImgCut插件(后续博客介绍) 代码讲解 function base64toFile(data ...
图片base64，file,blob格式的相互转换，以及gif转base64
图片base64,file,blob格式的相互转换,以及gif转base64(第六点) 1.new Image()图片链接转base64 只能转化为普通的jpg/png图片.无法转化gif图 type ...
base64转为file文件
base64转为file文件 public JSONObject upload2(JSONObject json) {File target = null;InputStream ins;BASE64 ...
base64转file文件（两种方法）
复制走,直接用!!! 方法一: function base64toFile (dataurl, filename) {let arr = dataurl.split(',')let mime = ar ...
Base64 转 File （附下载）
问题当需要下载已经上传的文件时,后端太烂不愿意做,就只传了base64,然后丢给我们,这时候应该怎么办,这里有两个解决方法 1.打一顿就好了 2.老实自己写吧... 解决 1.先吧base64转换为 ...
使用JS和JAVA实现文件格式与base64格式相互转换
JS任意文件转base64 <!doctype html> <html> <head> <meta charset="utf-8"> ...

文件格式相互转换（base64转File等）

文件格式相互转换（base64转File等）相关推荐

最新文章

热门文章