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

javascript base64

2022-08-29 23:55:33

断续器TypeScript 版本也可在答案中找到

现在我通过以下行获取文件对象：

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

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

答案 1

使用以下类尝试解决方案：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]FileBlobFileReader

答案 2

现代 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];
   try {
      const result = await toBase64(file);
      return result
   } catch(error) {
      console.error(error);
      return;
   }
   //...
}