Javascript 如何从获取承诺返回base64数据？

我想将图像从URL转换为Base64，并将其存储在一个状态以供以后使用

如何从fetch（）返回数据

我可以使用CORS安全图像和HTML画布使其工作，但这不适用于公共域

  openImage = (index) => {
    const url = formatURLs[index];
    const base64 = this.getBase64Image(url);

    this.setState(prevState => ({
      currentImage: index,
      currentImagebase64: base64
    }));
  }

  getBase64Image(url) {
    fetch(url).then(r => r.blob()).then(blob => {
      var reader = new FileReader();
      reader.onload = function() {
           var b64 = reader.result.replace(/^data:.+;base64,/, '');
           return b64;
      };
      reader.readAsDataURL(blob);
    });
  }

当我输入console.log（reader.result）时，它将按预期输出base64

---

但是，当我返回b64时，它将以“未定义”的形式返回到openImage。

getBase64Image是异步的，因此当以同步方式调用它时，它将返回未定义

你可以试试那样的

openImage=async（索引）=>{
const url=formatURLs[index]；
const base64=wait this.getBase64Image（url）；
this.setState（prevState=>({
当前图像：索引，
currentImagebase64:base64
}));
}
异步getBase64Image（url）=>{
const response=等待获取（url）；
const blob=wait response.blob（）；
const reader=new FileReader（）；
等待新的承诺（（决定，拒绝）=>{
reader.onload=解析；
reader.onerror=拒绝；
reader.readAsDataURL（blob）；
});
返回reader.result.replace（/^data:.+；base64，/，''）
}

您必须在内部设置状态。然后（）

---

为什么不直接存储Blob呢？

fetch（）

是异步的，所以不能从类似您的函数返回值。您可以在

回调中返回承诺并更新状态。然后（）

回调。您需要。然后您可以

返回

这些，以便

getBase64Image

返回承诺。更改

openImage

以等待承诺的结果。不要制作base64版本。正如@Bergi所说的，你最好保存这个斑点。如果需要持久化，则使用IndexedDb存储Blob。当需要显示图像时，请使用blobURI（URL.createObjectURL）。如果您正在生成一个需要嵌入该文件的独立文档，那么您只需要一个dataURI，而且这种情况似乎并不罕见。请避免！编写一个单独的函数，该函数使用

文件读取器

，并从blob返回base64字符串的承诺。另外，如果您想使用

async

/

wait

，您可能应该在

getBase64Image

中这样做well@Bergi谢谢，你说的第二句话是对的，我太懒了。对于第一条评论，你能详细说明一下你会怎么做吗？我希望你不介意编辑-一个更干净的解决方案是创建一个单独的函数来创建

新承诺

：-）修复它@patrickroberts你应该从

getBase64Image

返回一个承诺，并将

setState

保存在

openImage

函数中。

getBase64Image(url) {
    fetch(url).then(r => r.blob()).then(blob => {
      var reader = new FileReader();
      reader.onload = function() {
           var b64 = reader.result.replace(/^data:.+;base64,/, '');
           this.setState({
             currentImagebase64: b64
           });
      };
      reader.readAsDataURL(blob);
    });
  }