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

Requesting blob images and transforming to base64 with fetch API(使用 fetch API 请求 blob 图像并转换为 base64)

问题描述

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

I have some images that will be displayed in a React app. I perform a GET request to a server, which returns images in BLOB format. Then I transform these images to base64. Finally, i'm setting these base64 strings inside the src attribute of an image tag.

最近我开始使用 Fetch API.我想知道是否有办法在一次"中进行转换.

Recently I've started using the Fetch API. I was wondering if there is a way to do the transforming in 'one' go.

下面是一个例子来解释我到目前为止的想法和/或如果这甚至可以通过 Fetch API 实现.我还没有在网上找到任何东西.

Below an example to explain my idea so far and/or if this is even possible with the Fetch API. I haven't found anything online yet.

  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
  })

推荐答案

FileReader.readAsDataURL 的返回不是promise.您必须按照旧方式进行操作.

The return of FileReader.readAsDataURL is not a promise. You have to do it the old way.

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) ;
}) ;

通用功能:

function urlContentToDataUri(url){
    return  fetch(url)
            .then( response => response.blob() )
            .then( blob => new Promise( callback =>{
                let reader = new FileReader() ;
                reader.onload = function(){ callback(this.result) } ;
                reader.readAsDataURL(blob) ;
            }) ) ;
}

//Usage example:
urlContentToDataUri('http://example.com').then( dataUri => console.log(dataUri) ) ;

//Usage example using await:
let dataUri = await urlContentToDataUri('http://example.com') ;
console.log(dataUri) ;

这篇关于使用 fetch API 请求 blob 图像并转换为 base64的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！