Angular8

Question

在我的 Angular8 应用程序中，我有一个拖放区，我可以在其中拖放文件，例如 PDF、MS Word、CSV 等。我正在使用在此 blog, but also documented by Mozilla MDN 上找到的技术。该代码运行良好，但我无法弄清楚的一件重要事情是如何捕获正在上传的文件字节，以便我可以将它们保存到数据库中。

我在下面放置了 Opera 浏览器源代码调试器的屏幕截图，显示了打字稿和生成的 fileObj 和 blobObj 值。调试器抱怨 readAsBinaryString(blobObj)，说 blobObj 不是 Blob。查看 blobObj 值，我发现它不是我以前见过的 Blob。而且，查看所有值，none 作为 Blob 对我来说很突出。此外，文件字节也不明显。查看下面的 html，我想不出会显示字节的更改。

我希望有拖放经验的人可以解释它是如何完成的。

谢谢！

调试器屏幕截图

HTML

<table class="table table-striped table-forum">
  <tbody>
    <tr>
      <td>
        <div class="container" style="float: left; padding-top: 10px; padding-left: 10px;" appDnd (fileDropped)="onFileDropped($event)" (itemDropped)="onItemDropped($event)">
          <input type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
          <img src="assets/img/dnd/ic-upload-file.svg" alt="">
          <h3>Drag and drop file here</h3>
          <h3>or</h3>              
          <label for="fileDropRef" style="font-size: 14px; font-weight: 600; height: 25px; padding: 5px 5px;">Browse for File</label>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="files-list" style="width: 35%;">
          <div class="single-file" *ngFor="let file of files; let i = index">
            <img src="assets/img/dnd/ic-file.svg" width="45px" alt="file">
            <div class="info">
              <h4 class="name">
                {{ file?.name }}
              </h4>
              <p class="size">
                {{ formatBytes(file) }}
              </p>
              <app-progress [progress]="file?.progress" style="width: 200px;"></app-progress>
            </div>
            <img src="assets/img/dnd/ic-delete-file.svg" class="delete" width="20px" alt="file" (click)="deleteFile(i)">
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

const reader = new FileReader();

// FileReader has an onload event that you handle when it has loaded data
reader.onload = (e: any) => {
  const data = e.target.result as any;
  console.log({type: 'GalleryComponent prepareFilesList - data:', data});
};

// this will kick off the onload handler above
reader.readAsDataURL(file);

Angular8 - 从拖放区文件中获取二进制字符串文件

Angular8 - Getting File a Binary String from a Drop Zone File

drag-and-drop