如何在 JavaScript 中将 Blob 转换为 Base64 字符串？-js教程-PHP中文网

如何在 JavaScript 中将 Blob 转换为 Base64 字符串？

Patricia Arquette

发布： 2024-11-25 19:18:12

原创

781 人浏览过

How to Convert a Blob to a Base64 String in JavaScript?

使用 FileReader 将 Blob 转换为 Base64

在 JavaScript 中，您可能会遇到需要转换 Blob 对象的情况，该对象通常表示图像或文件，为 Base64 字符串。当您需要以文本格式存储或传输二进制数据时，例如通过 HTTP 发送或将其存储在数据库中，此转换是必要的。

您提供的代码片段，使用 Blob 和 FileReader API ，旨在执行此转换。但是，您提到了源变量返回 null 的问题。

使用 FileReader for Blob to Base64

此问题的解决方案是修改代码以正确使用 FileReader。下面是更新后的代码：

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

登录后复制

在此代码中，readAsDataURL() 方法用于将 Blob 数据编码为 Base64 字符串。然后使用 onloadend 事件处理程序从 reader.result 属性检索 base64 编码的数据。

使用 jQuery 的更简单方法

或者，您可以考虑使用 jQuery 进行更简洁的实现：

$.ajax({
  url: "upload.php", // URL to submit the form
  type: "POST",
  data: {
    image: blob
  },
  beforeSend: function(xhr) {
    // Encode the blob as a base64 string
    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function() {
      // Append the encoded data to the form data
      var data = reader.result;
      xhr.setRequestHeader("Image-Data", data);
    }
  }
});

登录后复制

请注意，jQuery Ajax 方法将处理发送编码的 Base64 字符串以及表单

删除 Data-URL 声明

需要注意的是，Blob 的结果将在 Base64 编码数据之前包含 Data-URL 声明，这一点很重要。要仅检索 Base64 编码的字符串，可以使用以下代码：

var base64String = base64data.substring(base64data.indexOf(',') + 1);

登录后复制

以上是如何在 JavaScript 中将 Blob 转换为 Base64 字符串？的详细内容。更多信息请关注PHP中文网其他相关文章！