如何在prime ng p-fileUpload中从fileupload中删除无效或特定文件？

Question

我已使用文件上传来上传文件，我想在选择其中一个文件时验证这些文件，如果该文件不是有效文件，则将其删除。

.html

<p-fileUpload #fileUpload  name="datafiles"
           [accept]=FileExtentionValue
           [url]="FileUploadUrl"
           [showUploadButton]="isUploadEnable"
           [disabled]="diableFileupload"
            (onUpload)="onUpload($event)"
            (onSelect)="validateFile($event)"
           multiple="multiple">
          </p-fileUpload>

.ts

onUpload(event) {
        for (let file of event.files) {
          this.uploadedFiles.push(file);
        }
        this.messageService.add({ severity: 'info', summary: 'File Uploaded', detail: '' });
      }

验证填充名称

     validateFile(event) {
    let tempFiles: any = [];
    var FileNmaeMust: any;
    for (let file of event.files) {
      tempFiles.push(file.name);
    }
    for (let i = 0; i < tempFiles.length; i++) {
      let count = 1;
      for (let j = 0; j < this.ClientDataFileTypeValue.length; j++) {
        FileNmaeMust = "";
        if (this.ClientDataFileTypeValue[j] == "Order") {
          FileNmaeMust = this.MPID + "_ORDER_";
        }
        /*** Validate File  */
        var templen = FileNmaeMust + "YYYYMMDD.psv";
        if (tempFiles[i].includes((FileNmaeMust).toLocaleUpperCase()) && tempFiles[i].length == templen.length) {
          this.isUploadEnable = true;
          break;
        }
        if (count == this.ClientDataFileTypeValue.length) {
          this.isUploadEnable = false;
          this.messageService.add({ severity: 'error', summary: 'Files', detail: 'Please select correct file ' + tempFiles[i] });
        }
        count++;
      }
    }
  }

Answer 1

onSelect Event - 选择文件时调用的回调。

Official Documentation

示例：

    <p-fileUpload #fileUpload  name="datafiles"
           [accept]=FileExtentionValue
           [url]="FileUploadUrl"
           [showUploadButton]="isUploadEnable"
           (onUpload)="onUpload($event)" multiple="multiple"
           (onSelect)="onSelect($event)">
    </p-fileUpload>

    onUpload(event) {
        for (let file of event.files) {
          this.uploadedFiles.push(file);
        }
        this.messageService.add({ severity: 'info', summary: 'File Uploaded', detail: '' });
    }

   onSelect(event) {
       // event.originalEvent: Original browser event. 
       // event.files: List of selected files.

       // Your validation code against list of selected files / selected file.
    }

希望这会有所帮助。，

Answer 2

我已经使用 id 解决了它。我已经定义了 #fileUpload 并将其传递给 (onSelect)="validateFile($event,fileUpload)" 函数来验证和从数组中删除此文件。

<p-fileUpload #fileUpload name="datafiles" 
[accept]=FileExtentionValu
[url]="FileUploadUrl" 
[disabled]="isDiableFileupload"
[showUploadButton]="isUploadEnable"
(onSelect)="validateFile($event,fileUpload)" (onBeforeUpload)="onBeforeSend($event)"
(onUpload)="onUpload($event)"
 multiple="multiple">
</p-fileUpload>

.ts

import {FileUpload } from 'primeng/primeng';

validateFile(event, uploader: FileUpload) {
        let tempFiles: any = [];
        var FileNmaeMust: any;
        for (let file of event.files) {
          tempFiles.push(file.name);
        }
        for (let i = 0; i < tempFiles.length; i++) {
          let count = 1;
          for (let j = 0; j < this.ClientDataFileTypeValue.length; j++) {
            FileNmaeMust = "";
            if (this.ClientDataFileTypeValue[j] == "Order") {
              FileNmaeMust = this.MPID + "_ORDER_";
            }
            /*** Validate File  */
            var templen = FileNmaeMust + "YYYYMMDD.psv";
            if (tempFiles[i].includes((FileNmaeMust).toLocaleUpperCase()) && tempFiles[i].length == templen.length) {
              this.isUploadEnable = true;
              break;
            }
            if (count == this.ClientDataFileTypeValue.length) {
              this.isUploadEnable = false;
              uploader.remove(event, i);
              this.isUploadEnable = true;
              this.messageService.add({ severity: 'error', summary: 'Files', detail: 'Please select correct file ' + tempFiles[i] });
            }
            count++;
          }
        }
      }