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;
  }
}

返回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));
}

但是为什么要承诺？

因为您的下一个问题将是：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.

承诺是最终将可用的值的占位符/包装； 但尚未。它们是async functions的基础。

因此，让我们跳过混乱的回调，直接进入编写的地方

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

但是为此，您必须重新学习async和await。

将文件转换为Base64

2 个答案:

但是为什么要承诺？