javascript - 当迭代之前有值时，对象数组的属性为 NULL

Question

我正在使用 TypeScript (Angular 8) 中的文件，因此我使用 Base64 并使用以下代码对文件进行了编码:

  private async convetTob64(evidences: Array<EvidenceToDisplay>): Promise<Array<EvidenceToDownload>> {
    const results: Array<EvidenceToDownload> = [];
    for (const evidence of evidences) {
      const evidenceToDownload: EvidenceToDownload =  {
        base64: null,
        name: '',
        extension: '',
      };
      const reader = new FileReader();
      reader.onloadend = function() {
        evidenceToDownload.base64 = reader.result;
      };
      reader.readAsDataURL(evidence.file);
      evidenceToDownload.name = evidence.name;
      evidenceToDownload.extension = this.getExtencionFromName(evidence);
      results.push(evidenceToDownload);
    }

    return results;
  }

我用其他方法得到结果:

  public async downloadEvidences() {
            const zip = new JSZip();
            let consecutive = 1;
            const allEvidences: Array<EvidenceToDisplay> = this.mergeEvidenceArray(this.manualEvidences, this.mobilityEvidences);
            const evidencesToDownload: Array<EvidenceToDownload> = await this.convetTob64(allEvidences);
            console.log(evidencesToDownload);
            for (let i = 0; i < evidencesToDownload.length; i++) {
              console.log(evidencesToDownload[i].base64);
              zip.file(EVIDENCE + DASH + consecutive + DOT + evidencesToDownload[i].extension, evidencesToDownload[i].base64,
                 { binary : true, base64: true, compression : 'DEFLATE' });
              consecutive++;
            }
            zip.generateAsync({type: 'blob'}).then(function(blob) {
              FileSaver.saveAs(blob, 'test' + DOT + ZIP);
            });
          }

在evidencesToDownload的第一个控制台日志中，我得到以下结果: Console log result

但是在 for 迭代内的控制台日志中我得到了这个结果:

Second console log result

当我使用“array.forEach”时，我曾经遇到过这个问题，但是当我更改为“normal for”时，正常情况下就解决了有人知道为什么会发生这种情况吗？

我通过改变将文件编码为二进制而不是base64的方式来解决，如下所示:(为了避免使用文件阅读器，我认为这是问题所在)。

  public async downloadEvidences() {
    const zip = new JSZip();
    let consecutive = 1;
    const allEvidences: Array<EvidenceToDisplay> = this.mergeEvidenceArray(this.manualEvidences, this.mobilityEvidences);
    for (let i = 0; i < allEvidences.length; i++) {
      const extension = this.getExtencionFromName(allEvidences[i]);
      const MIMEType = this.getMIMEtype(extension);
      const blob = new Blob([allEvidences[i].file], { type: MIMEType });
      zip.file(EVIDENCE + DASH + consecutive + DOT + extension, blob,
        { binary : true, compression : 'DEFLATE' });
     consecutive++;
    }
    zip.generateAsync({type: 'blob'}).then(function(blob) {
      FileSaver.saveAs(blob, 'test' + DOT + ZIP);
    });
  }

这个异步读取文件的链接也帮助了我:https://simon-schraeder.de/posts/filereader-async/

Answer 1

您可以通过从函数 convetTob64 返回 promise 数组来解决此问题。我在下面添加了一个示例，其中包含您修改后的代码。

async function convetTob64(evidences) {
  return Promise.all(evidences.map(evidence => new Promise((resolve, reject) => {
    const evidenceToDownload = {
      base64: null,
      name: '',
      extension: '',
    };
    const reader = new FileReader();
    reader.onloadend = function() {
      evidenceToDownload.base64 = reader.result;
      resolve(evidenceToDownload);
    };
    reader.readAsDataURL(evidence);

    evidenceToDownload.name = evidence.name;
    evidenceToDownload.extension = '.someExtension';
  })));
}

async function load(e) {
  const evidences = await convetTob64(Object.values(e.target.files));
  console.log(evidences);

}

<input type="file" onchange="load(event)" multiple />
<div id="msg"></div>