如何在JavaScript中将文件转换为base64？

现在，我通过此行获取File对象：

file = document.querySelector('#files > input[type="file"]').files[0]

我需要通过base 64中的json发送此文件。我应该怎么做才能将其转换为base64字符串？

#1 楼

现代ES6方式（异步/等待）

const toBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
});

async function Main() {
   const file = document.querySelector('#myfile').files[0];
   console.log(await toBase64(file));
}

Main();

UPD：

如果要捕获错误

async function Main() {
   const file = document.querySelector('#myfile').files[0];
   const result = await toBase64(file).catch(e => Error(e));
   if(result instanceof Error) {
      console.log('Error: ', result.message);
      return;
   }
   //...
}

该代码不正确。如果等待返回被拒绝的Promise的函数，则调用不会返回错误。它会被抛出，您需要抓住它。

–丹克鲁姆
2月20日0:30

异步功能和Promise使用的一个很好的例子

– Thiago Frias
4月30日，下午3:52

我实际上尝试了此代码段，尝试在上转换图像并收到错误。：Users.js：41未捕获（承诺）TypeError：无法在“ FileReader”上执行“ readAsDataURL”：参数1的类型不是“ Blob”。

–nishi
9月13日下午3:56

#2 楼

使用FileReader类尝试解决方案：

function getBase64(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     console.log(reader.result);
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}

var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string

请注意，.files[0]是File类型，它是Blob的子类。因此，它可以与FileReader一起使用。
请参见完整的工作示例。

了解有关FileReader API的更多信息：developer.mozilla.org/en-US/docs/Web/API/FileReader和浏览器支持：caniuse.com/#feat=filereader

–卢卡斯·里西斯（Lukas Liesis）
17年6月9日在19:16

我尝试使用getBase64（）函数的return reader.result（而不是使用console.log（reader.result）），因为我想将base64捕获为变量（然后将其发送到Google Apps脚本）。我使用以下函数调用了该函数：var my_file_as_base64 = getBase64（file），然后尝试使用console.log（my_file_as_base64）打印到控制台，只是未定义。如何正确地将base64分配给变量？

–user1063287
17年11月9日在5:35

如果有人可以回答，我就以上评论提出了一个问题。 stackoverflow.com/questions/47195119/…

–user1063287
17年11月10日在5:21

我需要在浏览器中以相同的文件名打开此Base64文件，我正在使用window.open（url，'_blank'）正常工作，如何给它指定文件名？请帮忙。

– Munish Sharma
18-4-26在8:14

谢谢！我认为这在developer.mozilla.org/zh-CN/docs/Web/API/FileReader/上无法很好地解释。

– johey
5月12日15:11

#3 楼

如果您追求基于承诺的解决方案，请使用@Dmitri的代码：

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file).then(
  data => console.log(data)
);

我需要在浏览器中以相同的文件名打开此Base64文件，我正在使用window.open（url，'_blank'）正常工作，如何给它指定文件名？请帮忙。

– Munish Sharma
18年4月26日在8:16

#4 楼

建立在Dmitri Pavlutin和joshua.paling答案的基础上，这是一个扩展版本，可提取base64内容（删除开头的元数据），并确保正确完成填充。

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      let encoded = reader.result.toString().replace(/^data:(.*,)?/, '');
      if ((encoded.length % 4) > 0) {
        encoded += '='.repeat(4 - (encoded.length % 4));
      }
      resolve(encoded);
    };
    reader.onerror = error => reject(error);
  });
}

Chrome 69，第一个替换是捕获空文件，第二个替换是缺少逗号-编码= reader.result.replace（“ data：”，“”）.replace（/^.*; base64，/，“”）;

–user3333134
18/09/27在13:37

我的话，我的确确实想念那昏迷。令人难以置信的是，它似乎根本没有打扰我的后端，我仍然能够成功上传excel文件o_O。我已经修复了正则表达式，以考虑您的空文件用例。谢谢。

– Arnaud P
18-10-11在8:42

我有一个更简单的版本：resolve（reader.result.replace（/^.*,/，''））;;。由于coma在base64字母之外，因此我们可以剥离出现的所有内容，直到并包括逗号。 stackoverflow.com/a/13195218/1935128

–约翰里德
19年7月28日在13:01

好的，谢谢大家的注意，尽管根据我在这里写的正则表达式（我需要再次进行实验才能确定），但可能只有数据：没有任何逗号，因此我将第一部分保持不变。我已经相应地更新了答案。

– Arnaud P
19年8月2日在22:09

@ArnaudP Typescript错误：类型'string |不存在属性'replace' ArrayBuffer”。

–罗梅尔·戈麦斯（Romel Gomez）
19年8月22日在16:05

#5 楼

JavaScript btoa（）函数可用于将数据转换为base64编码的字符串

btoa仅适用于字符串。如何与文件一起使用？

–瓦西里
16 Mar 29 '16 at 10:02

您将必须先读取文件，然后将其传递给此函数。.诸如jsfiddle.net/eliseosoto/JHQnk之类的东西

–普拉纳夫（Pranav）疯子
16 Mar 29 '16 at 10:10

@PranavManiar您的小提琴不再起作用。您可以更新链接吗？

–丹
18 Mar 6 '18 at 20:42

#6 楼

这是我编写的几个函数，用于获取可以轻松传递的json格式的文件：

    //takes an array of JavaScript File objects
    function getFiles(files) {
        return Promise.all(files.map(file => getFile(file)));
    }

    //take a single JavaScript File object
    function getFile(file) {
        var reader = new FileReader();
        return new Promise((resolve, reject) => {
            reader.onerror = () => { reader.abort(); reject(new Error("Error parsing file"));}
            reader.onload = function () {

                //This will result in an array that will be recognized by C#.NET WebApi as a byte[]
                let bytes = Array.from(new Uint8Array(this.result));

                //if you want the base64encoded file you would use the below line:
                let base64StringFile = btoa(bytes.map((item) => String.fromCharCode(item)).join(""));

                //Resolve the promise with your custom file structure
                resolve({ 
                    bytes: bytes,
                    base64StringFile: base64StringFile,
                    fileName: file.name, 
                    fileType: file.type
                });
            }
            reader.readAsArrayBuffer(file);
        });
    }

    //using the functions with your file:

    file = document.querySelector('#files > input[type="file"]').files[0]
    getFile(file).then((customJsonFile) => {
         //customJsonFile is your newly constructed file.
         console.log(customJsonFile);
    });

    //if you are in an environment where async/await is supported

    files = document.querySelector('#files > input[type="file"]').files
    let customJsonFiles = await getFiles(files);
    //customJsonFiles is an array of your custom files
    console.log(customJsonFiles);

保证一切，基于array.map效果很好！至少对于我来说。

–davidwillianx
19年7月2日在12:15

#7 楼

onInputChange(evt) {
    var tgt = evt.target || window.event.srcElement,
    files = tgt.files;
    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
            var base64 = fr.result;
            debugger;
        }
        fr.readAsDataURL(files[0]);
    }
}

编程黑洞网