如何将 Base64字符串转换为 javascript 文件对象，如从文件输入表单？

小开

最佳答案

方法1: 只适用于 dataURL，不适用于其他类型的 url。

 function dataURLtoFile(dataurl, filename) {
 

var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
            

while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
        

return new File([u8arr], filename, {type:mime});
}
    

//Usage example:
var file = dataURLtoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=','hello.txt');
console.log(file);

方法2: 适用于任何类型的 url (http url、 dataURL、 blobURL 等)

 //return a promise that resolves with a File instance
function urltoFile(url, filename, mimeType){
return (fetch(url)
.then(function(res){return res.arrayBuffer();})
.then(function(buf){return new File([buf], filename,{type:mimeType});})
);
}
    

//Usage example:
urltoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=', 'hello.txt','text/plain')
.then(function(file){ console.log(file);});

小开

小心,

JAVASCRIPT (JAVASCRIPT)

<script>
function readMtlAtClient(){


mtlFileContent = '';


var mtlFile = document.getElementById('mtlFileInput').files[0];
var readerMTL = new FileReader();


// Closure to capture the file information.
readerMTL.onload = (function(reader) {
return function() {
mtlFileContent = reader.result;
mtlFileContent = mtlFileContent.replace('data:;base64,', '');
mtlFileContent = window.atob(mtlFileContent);


};
})(readerMTL);


readerMTL.readAsDataURL(mtlFile);
}
</script>

超文本标示语言

    <input class="FullWidth" type="file" name="mtlFileInput" value="" id="mtlFileInput"
onchange="readMtlAtClient()" accept=".mtl"/>

然后 mtlFileContent 将您的文本作为解码字符串！

小开

const url = 'data:image/png;base6....';
fetch(url)
.then(res => res.blob())
.then(blob => {
const file = new File([blob], "File name",{ type: "image/png" })
})

Base64字符串-> Blob-> 文件。

小开

我有一个非常类似的需求(从外部 xml 导入文件导入 base64编码的图像。在使用 Xml2json-light 库转换为 json 对象之后，我能够利用 cuixiping 上面的答案来将传入的 b64编码图像转换为文件对象。

const imgName = incomingImage['FileName'];
const imgExt = imgName.split('.').pop();
let mimeType = 'image/png';
if (imgExt.toLowerCase() !== 'png') {
mimeType = 'image/jpeg';
}
const imgB64 = incomingImage['_@ttribute'];
const bstr = atob(imgB64);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
const file = new File([u8arr], imgName, {type: mimeType});

通过 xml2json-light 转换后，我的传入 json 对象具有两个属性: FileName 和 _@ttribute (这是包含在传入元素主体中的 b64图像数据)我需要根据传入的文件扩展名生成默剧类型。一旦我从 json 对象中提取/引用了所有的片段，生成新的 File 对象就是一个简单的任务(使用 cuixiping 提供的代码引用) ，它与我现有的类完全兼容，这些类希望从浏览器元素中生成一个 File 对象。

希望这能帮助其他人找到线索。

小开

这是最新的 async/await模式解决方案。

export async function dataUrlToFile(dataUrl: string, fileName: string): Promise<File> {


const res: Response = await fetch(dataUrl);
const blob: Blob = await res.blob();
return new File([blob], fileName, { type: 'image/png' });
}

小开

以下是@cuixiping 提供的已接受答案的类型脚本版本，现在使用 Buffer 而不是 atob ()

我在 TypeScript 中看到了使用 atob ()的弃用警告，尽管它没有被完全弃用。只有一个超载。但是，我将我的建议转换为使用 Buffer 的弃用警告建议。它似乎更干净，因为它不需要额外的循环来转换每个字符。

  /***
* Converts a dataUrl base64 image string into a File byte array
* dataUrl example:
* data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAACLCAYAAABRGWr/AAAAAXNSR0IA...etc
*/
dataUrlToFile(dataUrl: string, filename: string): File | undefined {
const arr = dataUrl.split(',');
if (arr.length < 2) { return undefined; }
const mimeArr = arr[0].match(/:(.*?);/);
if (!mimeArr || mimeArr.length < 2) { return undefined; }
const mime = mimeArr[1];
const buff = Buffer.from(arr[1], 'base64');
return new File([buff], filename, {type:mime});
}

在文件的顶部，您需要一个导入来满足输入的要求。

import { Buffer } from 'buffer';

不需要特殊的 npm 包。

小开

const file = new File([
new Blob(["decoded_base64_String"])
], "output_file_name");

您可以使用类似这个的库对 base64进行解码并将其编码为 arrayBuffer。

小开

打字稿完整版

async uploadImage(b64img: string) {
var file = await this.urltoFile(b64img,'name.png',this.base64MimeType(b64img));
}


//return a promise that resolves with a File instance
urltoFile(url, filename, mimeType){
return (fetch(url)
.then(function(res){return res.arrayBuffer();})
.then(function(buf){return new File([buf], filename,{type:mimeType});})
);
}


//return mime Type of bs64
base64MimeType(encoded) {
var result = null;
  

if (typeof encoded !== 'string') {
return result;
}
  

var mime = encoded.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
  

if (mime && mime.length) {
result = mime[1];
}
  

return result;
}

这对我来说工作转换基地64图像到文件