时间戳

首页 > 解决方案 > primeNG p-fileUpload 自定义模式回调未触发

angular - primeNG p-fileUpload 自定义模式回调未触发

问题描述

当我启用 customeMode 时， primeNG p-fileUpload 不会触发 uploadHandler。你能帮我解决这个问题吗？

我需要手动发出服务器请求。

   <p-fileUpload name="invoiceFiles[]" customUpload="true" [showUploadButton]="false" multiple="multiple"
                [showCancelButton]="false" (uploadHandler)="invoiceUpload($event)">
              </p-fileUpload>

标签： angularprimeng

解决方案

如果您隐藏了上传按钮，则需要另一种方法来捕获选定的文件。一种方法是使用onSelect将文件存储在可以与表单一起提交的数组中。这是一个例子：

<p-fileUpload name="demo[]" #fileInput (onSelect)="onSelect($event)" [showUploadButton]="false" customUpload="true"></p-fileUpload>

在控制器中：

import { FormArray, FormControl, FormGroup, FormBuilder, Validators} from '@angular/forms';

private myFormFilesToUpload: FormArray;

constructor(private _fb: FormBuilder) {}

this.myForm = this._fb.group({
        //...other form controls
        filesToUpload: this._fb.array([])
});

this.myFormFilesToUpload = this.myForm.get('filesToUpload') as FormArray;

onSelect(event) {
    if (event.files && event.files.length > 0) {
        this.myForm.markAsDirty();
        this.myFormFilesToUpload.push(this._fb.group({
            fieldName: 'my_images',
            files: this._fb.array(Array.from(event.files))
        }));
    }
}

然后文件应该被发送去你提交表格。

推荐阅读