Question

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

.html

MyModelForm

.ts

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

验证填充名称

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

Answer 1

我已使用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++;
          }
        }
      }

Answer 2

onSelect事件 -选择文件后调用。

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.
    }

希望这会有所帮助。

如何从主要ng p-fileUpload中的文件上传中删除无效或特定的文件？

2 个答案: