ng-zorro-antd - 为什么多次调用带有选项 multiple 的 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
被调用等于文件的列表大小。
解决方案
推荐阅读
- python - 当游戏状态是pygame中的“游戏”时,你如何写你想要发生的事情?
- vba - VBA 向 API 发送数据
- javascript - 如何更新在 Angular 中使用 *ngFor 迭代的所有项目的样式
- javascript - 模型未更新 Backbone.js
- mysql - mysql中同一表的另一列中的多个相同类型的列连接
- excel - Sharepoint 使用 Azure 逻辑应用中的 base64 内容更新 excel 文件?
- python - Pandas 数据透视表:每个单元格中的值显示两次
- sql-server - Spring Boot - 使用 Windows 身份验证连接到 SQL Server 数据库
- c# - 如何根据传入的读取字节设置字节大小
- reactjs - 无法开玩笑