Блог

В моем приложении Angular8 у меня есть drop zone, куда я могу перетаскивать файлы, такие как PDF, MS Word, CSV и т. Д. Я использую технику, описанную в этом блоге, но также задокументированную Mozilla MDN. Код работает очень хорошо, но одна важная вещь, которую я не могу понять, — это как захватить загружаемые байты файла, чтобы я мог сохранить их в базе данных.

Я разместил скриншот исходного кода браузера Opera ниже, показывающий машинописный текст и результирующие fileObj blobObj значения и . Отладчик жалуется readAsBinaryString(blobObj) , говоря, что blobObj это не a Blob . Глядя на blobObj значение, я вижу, что это не большой двоичный объект, который я видел раньше. И, глядя на все значения, ни одно из них не выделяется для меня как большой двоичный объект. Кроме того, байты файла также не очевидны. Глядя на приведенное 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>
 

 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);