Blob 到 javascript 中的 Base64 不从 FileReader 返回任何内容

Question

我在 typescript 中使用FileReader将 blob 转换为 base64 图像，然后该图像将显示在我的应用程序模板中。

  adaptResultToBase64(res: Blob): string {
    let imageToDisplay : string | ArrayBuffer | null = '';

    const reader = new FileReader();

    reader.onloadend = function () {
      imageToDisplay = reader.result;
      return imageToDisplay;
    };

    reader.readAsDataURL(res);

    return imageToDisplay;
  }

虽然记录在read.onloadend function 中的数据显示 base64 字符串，但我无法将其传递出 function。

我试过添加一个回调，但是在别处调用它的地方只返回一个空字符串。

Answer 1

请检查此代码

<input type="file" id="file">
<button id="click">click</button>

let data: string | ArrayBuffer;

document.getElementById('file').onchange = function (e: Event) {
  let files: FileList | null = (<HTMLInputElement>e.target).files;

  let reader: FileReader = new FileReader();
  reader.onload = function (e: ProgressEvent<FileReader>) {
    console.log(e.target.result);
    data = e.target.result;
  };
  if (files.length > 0) {
    reader.readAsDataURL(files?.[0]);
  }
};

document.getElementById('click').onclick = function () {
  console.log(data); // result if present otherwise null is returned
};

使用单独的方法视图。 return值为Promise 。

function adaptResultToBase64(res: Blob): Promise<string> {
    let reader: FileReader = new FileReader();

    return new Promise((resolve, reject) => {
        reader.onloadend = () => {
            resolve(reader.result as string);
        }
        reader.onerror = () => {
            reject("Error reading file.");
        }
        reader.readAsDataURL(res);
    })
}

得到结果

adaptResultToBase64(/* Blob value */)
    .then(resp => console.log(resp))
    .catch(error => console.log(error));

有关Promise的详细信息，请参见此处

MDN
学习.javascript.ru

Answer 2

我需要的基本结果并没有意识到reader.onload实际上是read.readAsDataUrl的回调并异步完成其中的所有内容。

adaptResultToBase64(res:Blob){

    const reader = new FileReader();

    reader.onload = function () {
      
    // Was missing code here that needed to be called asynchronously. 
    
    adapterToNewObject(reader.result.toString())

    };

    reader.readAsDataURL(res);

  }
}

我在 Angular 中执行此操作，因此对于在这里遇到此问题的任何其他人，它使用的是 Angular 语法：

在您的 class 中：

export class Component {

adaptedResult:Result


 getBase64() {
    this.http.get().subscribe((result: Blob) => {

        const reader = new FileReader();

        reader.onload = () => { 

          this.adaptedResult =  this.adapter(reader.result) // Assign or use  reader.result value, this is an example of using an adapter function.
        };
    
        reader.readAsDataURL(result);
      });
  }



 adapter(base64:string){
  return {
   name:'image',
   image:base64'
   }
 }

}