将文件转换为 Base64

Question

所以我正在尝试从标签转换文件。这就是我的 javascript 代码的样子：

var file = document.getElementById("file").files[0];
if (file) {
  var filereader = new FileReader();
  filereader.readAsDataURL(file);
  filereader.onload = function (evt) {
    var base64 = evt.target.result;
  }
}

那 returns undefined.

Answer 1

我认为您错过了代码中的 return 语句。用以下行替换您的函数：

var file = document.getElementById("file").files[0];
if (file) {
  var filereader = new FileReader();
  filereader.readAsDataURL(file);
  filereader.onload = function (evt) {
     var base64 = evt.target.result;
      return base64
  }

}

Answer 2

两个小帮手和一个例子

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

const blobToBase64 = blob => blobToDataUrl(blob).then(text => text.slice(text.indexOf(",")));

for(let file of document.getElementById("file").files) {
  blobToBase64(file).then(base64 => console.log(file, base64));
}

但为什么要使用 Promises？

因为您的下一个问题是：How do I get the base64 string out of onload?，简短的答案是 You don't。更长的答案是：It's like asking how to get something from the future into the now. You can't.

Promise 是 placeholder/wrapper 最终可用的值； 但还没有。他们是 async functions.

的基础

所以让我们跳过混乱的回调，直接进入你写的地方

for(let file of document.getElementById("file").files) {
  const base64 = await blobToBase64(file);
  console.log(file, base64);
}

但为此你必须复习 async and await。

将文件转换为 Base64

Convert file to Base64

javascript

base64

但为什么要使用 Promises？