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

Question

我想将从文件中提取的Base64String(例如:"AAAAA ....〜")转换为javascript文件对象.

我的意思是javascript文件对象就像这段代码:

HTML:

<input type="file" id="selectFile" > 

JS:

$('#selectFile').on('change', function(e) {
  var file = e.target.files[0];

  console.log(file)
}

'file'变量是一个javascript文件对象.所以我想将base64字符串转换为javascript文件对象.

我只想通过解码base64字符串(由文件中的其他应用程序编码)来获取文件对象,而无需html文件输入表单.

谢谢.

Answer 1

方式1:仅适用于dataURL,不适用于其他类型的网址.

 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:适用于任何类型的网址,(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);});

Answer 2

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

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

Answer 3

这是最新的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' });
}

Answer 4

这是上面 @cuixiping 接受的答案的 Typescript 版本，现在使用 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 包。

Answer 5

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

您可以使用这样的库来解码和编码 Base64 到 arrayBuffer。