我应该选择什么函数从 File 对象生成 base64-string？答案

【问题标题】：What function should I choose to make base64-string from a File object?我应该选择什么函数从 File 对象生成 base64-string？
【发布时间】：2017-11-30 16:13:00
【问题描述】：

我有 File 对象（我通过<input type=file /> 获得的音频）。

我想在服务器上发送它以保存在存储中。

我将发送包含我想从文件对象中获取的 base64 字符串的 json。

我很困惑fileReader interface 的什么功能我应该选择在base64 中转换文件。现在我用readAsBinaryString:

function getBase64(file) {
  return new Promise ( (res,rej) => {
    var reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = function () {
      res(reader.result);
    };
  })
}

使用这种方法，我将音频文件保存到服务器，在我下载它并像以前一样更改扩展名（在我的情况下为 mp3）并且音频没有播放之后。我看到有关编解码器的错误。

也许我在我的行动链中错过了一些重要的事情，我不知道。提前谢谢你。

【问题讨论】：

标签： javascript file base64

【解决方案1】：

readAsBinaryString 表示在 javascript 字符串中编码的二进制数据。由于客户端和服务器之间的编码差异，存在数据损坏的可能性。这里似乎就是这种情况。

根据此处的文档：https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryString readAsBinaryString 已弃用，取而代之的是 readAsArrayBuffer，它将文件读入 ArrayBuffer。 ArrayBuffer 将包含二进制文件中更一致的字节表示。但是，将 ArrayBuffer 转换为 base64 仍然有些棘手。

由于您对 Base64 编码的二进制数据感兴趣，我建议您在 FileReader 实例上使用 readAsDataURL 方法。它将文件内容直接读取为 Base64 编码字符串。前面有一些附加信息，以使其成为正确的数据 uri，如果需要，您可以将其删除。在此处查看readAsDataURL 文档：https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

【讨论】：