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

Question

UPD TypeScript 版本也可在答案中找到

现在我通过这一行获取 File 对象：

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

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

原文由 Vassily 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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();

升级版：

如果你想捕捉错误

async function Main() {
 const file = document.querySelector('#myfile').files[0];
 try {
 const result = await toBase64(file);
 return result
 } catch(error) {
 console.error(error);
 return;
 }
 //...
 }

原文由 Дмитрий Васильев 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 一起使用。

请参阅完整的工作 示例。

原文由 Dmitri Pavlutin 发布，翻译遵循 CC BY-SA 3.0 许可协议