是否可以在Javascript（Ionic，Angular）中将blob文件转换为base64Data？答案

【问题标题】：Is it possible to convert a blob file into a base64Data in Javascript (Ionic,Angular)?是否可以在Javascript（Ionic，Angular）中将blob文件转换为base64Data？
【发布时间】：2021-01-04 06:01:34
【问题描述】：

[

async FileZip() {
    const code = await fetch("./assets/input.txt")
    var blob = await downloadZip([code]).blob()
     console.log(blob);

 
   function blobToBase64(blob: Blob): Observable<string> {
      return new Observable<string>(observer => {
          const reader = new FileReader();
         reader.onerror = observer.error;
          reader.onabort = observer.error;
          reader.onload = () =>                     observer.next(reader.result as string);
          reader.onloadend = observer.complete;


    FileSharer.share({
      filename: "input.zip",
      base64Data: //base64datawillbehere ,
      contentType: 'application/zip'
    });
    reader.readAsDataURL(blob);
  })

我对 Ionic 和应用程序开发非常陌生。我已使用 client-zip 库将文本文件压缩为 zip blob 文件。使用 downloadZip() 我得到了一个 zip blob file 像 this。我想使用 Capacitor Filesharer 将此文件作为 zip 文件共享。但是要使用这个 Filesharer 插件，我似乎必须将此 blob zip 文件转换为 base64 数据。谁能告诉怎么做？？或者甚至有可能做到这一点？？

如果你觉得我的问题太不成熟，请原谅我，因为正如我所说，我对 javascript 很陌生。

【问题讨论】：

标签： javascript angular typescript ionic-framework blob

【解决方案1】：

考虑使用以下函数：

function blobToBase64(blob: Blob): Observable<string> {
    return new Observable<string>(observer => {
        const reader = new FileReader();
        reader.onerror = observer.error;
        reader.onabort = observer.error;
        reader.onload = () => observer.next(reader.result as string);
        reader.onloadend = observer.complete;
        reader.readAsDataURL(blob);
    })
}

【讨论】：

您好，我尝试在 Fileshare 插件中实现它，但在本地主机中我收到此错误 --- ""Failed to execute 'atob' on 'Window': the string to be解码当前未编码。 """
您好，我已经添加了代码，如果可以请检查

【解决方案2】：

尝试修改您的代码，如下所示：（没有更改之前的答案，因为它可能对其他人使用 Observable 策略来实现此类操作很有用，这与我建议使用承诺）

ngOnInit(): void {
  this.fileZip();
}

private blobToBase64(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = reject;
    reader.onabort = reject;
    reader.onload = () => resolve(reader.result as string);
    reader.readAsDataURL(blob);
  })
}

private async fileZip(): Promise<void> {
  const code = await fetch("./assets/input.txt")
  const blob = await downloadZip([code]).blob();
  const base64Data = await this.blobToBase64(blob);
  await FileSharer.share({
    filename: "input.zip",
    base64Data: base64Data,
    contentType: "application/zip",
  })
}

【讨论】：

嗨，我尝试了你提供的代码，但我得到了同样的错误-"" core.js:4197 错误错误：未捕获（承诺）：InvalidCharacterError：无法执行'atob' on 'Window'：要解码的字符串编码不正确。错误：无法在“窗口”上执行“atob”：要解码的字符串未正确编码。 ""
你能找出错误发生在哪一行吗？尝试使用断点...
我在这里附上了截图

【解决方案3】：

你可以试试这个代码 -

fileZip() {
constcode = awaitfetch("./assets/input.txt");
varblob = awaitdownloadZip([code]).blob()
console.log(blob);
varreader = newFileReader();
reader.readAsDataURL(blob); 
reader.onloadend = ()=> {
constresult = reader.resultasstring;
constbase64Data = result.split(',')[1];
console.log(base64Data)
FileSharer.share({
filename:"json.zip",
base64Data,
contentType:'application/zip'
    });
  }
}

【讨论】：