如何使用 javascript 将 base64 转换为二进制流？ [复制]答案

【问题标题】：How to convert base64 into binary stream using javascript? [duplicate]如何使用 javascript 将 base64 转换为二进制流？ [复制]
【发布时间】：2017-01-26 18:04:39
【问题描述】：

上传图片 API 需要二进制流。我尝试了新的FileReader() 及其readAsBinaryString() 方法，但它不起作用！看来二进制字符串和二进制流不是一回事，所以我换了个方式，尝试了readAsDataURL()的方法（因为我需要预览图片），现在我想知道：

1) 如何使用js将base64转成二进制流？

当我使用readAsBinaryString()时，响应如下（数据A）：

但是 API 需要这样的东西（数据 B）：

2) 有人知道如何将dataA（上图）转换为dataB（下图）吗？

【问题讨论】：

“我试过 new FileReader() 和它的 *readAsBinaryString()* 方法，但是不行！” 你说的“二进制流”是什么意思?
当您说“它不起作用”时 - 例如，您是否在控制台中遇到错误？
当你说 api 需要二进制流时，我很难相信 api 需要十六进制视图 (data B) - 它是哪一个？

标签： javascript file-upload binary base64

【解决方案1】：

这就是你如何将base64转换成二进制流

var base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(base64)
.then(res => {
  console.log(res.body instanceof ReadableStream)
})

注意：这仅适用于 Blink atm，如果您愿意，可以使用 Screw-FileReader 和 web-streams-polyfill 将任何 blob 转换为 字节流

但我真正认为您想要做的是将 base64 转换为 blob（二进制容器），然后将其作为二进制（而不是 base64）上传到 api，如果这是真的，那么这只是 @987654322 的副本@ 然后它只是用 ajax 将它发送到服务器的一个mather

var base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(base64)
.then(res => res.blob())
.then(blob => {
  console.log("here is your binary: ", blob)

  // now upload it
  fetch(api, {method: 'POST', body: blob})
})

首先获取 base64 确实不切实际，应该在使用 arrayBuffer 或 blob 之前进行处理
例如，如果您从画布获取它 - 尝试使用 canvas.toBlob 而不是 toDataUrl

【讨论】：