javascript - 如何防止在 Angular 中上传某些类型的文件？

Question

我工作的公司想要一个文件 uploader 。文件 uploader 不仅要上传文件，还必须阻止某些文件被上传。该公司与另一家公司签订了契约(Contract)来 build 该 field 。我是一名学习 Angular 的移动开发人员。如何防止某些文件被上传？

这是 HTML 文件的副本。

<div [hidden]="documentation.get('uploadMethod').value !== 'upload'">
    <div ng2FileDrop [uploader]="uploader">
      <span [hidden]="uploader.queue.length > 0 || (documentation.controls['fileUpload'].errors?.required && documentation.controls['fileUpload'].touched)">Drag Files Here</span><br>
      <table>
        <tbody>
          <tr *ngFor="let item of uploader.queue">
            <td>{{item.file.name}}</td>
            <td>
              {{item.file.size / 1024 >= 1000 ? (item.file.size / 1024 / 1024).toFixed(2) : (item.file.size / 1024).toFixed(2)}}
              {{item.file.size / 1000 >= 1000 ? 'mb' : 'kb'}}</td>
            <td>
              <button mat-raised-button (click)="removeItem(item)">Remove</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <button mat-button (click)="saveDocumentation()">Upload all</button>
      <button mat-button (click)="removeAll()">Remove all</button>
      <div
        [hidden]="uploader.progress < 1 || !(uploader.progress <= 100 && uploader.progress >= 0)">
        <div>{{uploader.progress}}</div>
      </div>
    </div>

  </div>

Answer 1

您需要使用HTML元素的accept属性。您将传递一串逗号分隔的文件类型。

<input type="file" id="profile_pic" name="profile_pic"
          accept=".jpg, .jpeg, .png">

将此用于接受属性指南 - https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept

对于 ngng2FileDrop(感谢 Z. Bagley)

<div ng2FileDrop [uploader]="uploader"
     [ng2FileDropSupportedFileTypes]="supportedFileTypes">
</div>

其中supportedFileTypes是文件类型的数组。

文档链接 - https://github.com/leewinder/ng2-file-drop