为什么带有多个选项的nzBeforeUpload被多次调用

问题描述

我正在使用Angular 10和ng-zorro，并且正在使用nz-upload组件，我有一个问题：

为什么调用beforeUpload等于上传的文件？如果我们有nzFileUpload []参数，则不需要重复

我的.html代码：

 <div>
   <nz-upload
      ngDefaultControl
      nzType="drag"
      (click)="form.get('files').markAsTouched()"
      [nzDirectory]="false"
      [nzBeforeUpload]="beforeUpload"
      [nzDisabled]="false"
      [nzLimit]="fileMaxQuantity"
      [nzSize]="0"
      [nzListType]="'text'"
      [nzMultiple]="true"
      [nzShowUploadList]="false"
      [nzShowButton]="false"
      (nzChange)="handleChange($event)"
       >
       <p class="ant-upload-drag-icon" style="margin-bottom: unset;">
          <i nz-icon nzType="cloud-upload"></i>
        </p>
        <p class="ant-upload-text">{{ '::FileUpload:FilesUploadMessage' | abpLocalization }}
        </p>
        <p class="ant-upload-hint">
           {{ '::FileUpload:FilesUploadHint' | abpLocalization }}
        </p>
    </nz-upload>
    <mat-error *ngIf="form.get('files').hasError('required') && form.get('files').touched">
       {{ '::FileUpload:FilesFieldRequired' | abpLocalization}}
     </mat-error>
    </div>

和我的.ts（上传前）：

beforeUpload = (singleFile: File,fileList: File[]): boolean => {
    // if (this.form.controls.files as FormArray)
    const fileNames = this.form.controls.fileNames.value as [];
    if (fileNames.length === this.fileMaxQuantity) {
      this.snackBarService.warning(this.localizationService.instant('::FileUpload:NumberFilesExceedsAllowed'),true);
      return false;
    } else {
      for (let i = 0; i <= fileList.length; i++) {
        const file = fileList[i];
      // _.each(fileList,(file) => {
        if (this.form.controls.fileNames.value.length === this.fileMaxQuantity) {
          this.snackBarService.warning(this.localizationService.instant('::FileUpload:NumberFilesExceedsAllowed'));
          break;
          // return false;
        } else {
          const tempStackSize = this.actualFileStackSize + file.size;
          if (file.size > this.fileMaxSize || tempStackSize > this.fileMaxSize) {
            this.snackBarService.warning(this.localizationService.instant('::FileUpload:FileTooHeavy'),true);
            return false;
          } else if ( !this.fileList.some( p => p.name === file.name ) ) {
            const ext = this.extensionPipe.transform(file.name);
            let control: FormControl;
            (this.form.controls.files as FormArray).push(new FormControl(file.name));
            (!this.regexWithExt.test(file.name)) ?
              this.fileListRequired.push(true) : // debe cambiar filename
              this.fileListRequired.push(false);

            control = new FormControl(file.name.replace(ext,''),[ Validators.pattern(this.regex),Validators.required,Validators.maxLength(this.fileNameMaxLength - ext.length),this.fileNameValidator()]);
            control.markAllAsTouched();
            (this.form.controls.fileNames as FormArray).push(control);
            // fileNames.push(file.name);
            this.fileList.push(file);
            this.actualFileStackSize = tempStackSize;
          }
        }
      }
      // fileList.forEach((file) => {
      // });
    }
    return false;
  }

从上面来看，问题在于此函数beforeUpload的调用等于文件的列表大小。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）