javascript - 如何使用javascript将base64转换为二进制流？

Question

这个问题已经有答案了:

Creating a BLOB from a Base64 string in JavaScript (15 个回答)

已关闭 6 年前。

上传图片API需要二进制流。我尝试过新的FileReader()及其 readAsBinaryString()方法，但是不行!看来二进制字符串和二进制流不是一回事，所以我改变了方式，尝试了readAsDataURL()方法(因为我需要预览图像)，现在我想知道:

1) 如何转换base64使用 js 转换为二进制流？

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

但是 API 需要这样的东西(数据 B):

2)有人知道如何将dataA(上图)转换成dataB(下图)吗？

Answer 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，如果这是真的，那么这只是Creating a Blob from a base64 string in JavaScript的重复那么只需用 ajax 将其发送到服务器即可

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 获取它 - 尝试使用 canvas.toBlob 代替toDataUrl