javascript - 在 JavaScript 中将 Blob 转换为 Base64

Question

我已成功将我的 base64 (DATA_URI) 图像转换为 blob，但无法将其还原。

我的 base64 到 blob 代码如下所示，有关更多信息，请查看 link .

b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

我正在尝试将我的 blob 转换为 base64，但出现错误

ERROR TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

这是我对取回我的 blob 图像资源的回复

我正在调用成功回调但无法理解这一点

这是我尝试将 blob 转换为 base64 的代码

if(window.FileReader) {
          var reader = new FileReader();
          reader.readAsDataURL(blob); 
          reader.onloadend = () => {
              var base64data = reader.result;                
              console.log(base64data);
          }
        }

调试时我看不到 reader.onloadend 它是 null 并且我无法调用它。

有什么帮助吗？？

Answer 1

我相信您需要在开始读取数据之前定义onloadend。它很可能在您分配之前完成读取并触发空函数。或者更准确地说，在您调用 readAsDataURL 时，onloadend 为 null。

var reader = new FileReader();
reader.onloadend = () => {
  var base64data = reader.result;                
      console.log(base64data);
}

reader.readAsDataURL(blob);