Question

我有一些图片会显示在React应用中。我对服务器执行GET请求，该服务器以BLOB格式返回图像。然后我将这些图像转换为base64。最后，我将这些base64字符串设置在图像标记的src属性中。

最近我开始使用Fetch API。我想知道是否有办法在'一'去做转换。

下面的示例解释我的想法到目前为止和/或甚至可以使用Fetch API。我还没有在网上找到任何东西。

  let reader = new window.FileReader();
  fetch('http://localhost:3000/whatever')
  .then(response => response.blob())
  .then(myBlob => reader.readAsDataURL(myBlob))
  .then(myBase64 => {
    imagesString = myBase64
  }).catch(error => {
    //Lalala
  })

Answer 1

FileReader.readAsDataURL的回归不是承诺。你必须以旧的方式去做。

fetch('http://localhost:3000/whatever')
.then( response => response.blob() )
.then( blob =>{
    var reader = new FileReader() ;
    reader.onload = function(){ console.log(this.result) } ; // <--- `this.result` contains a base64 data URI
    reader.readAsDataURL(blob) ;
}) ;

请求blob图像并使用fetch API转换为base64

1 个答案: