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

Question

当我启用customeMode时， primeNG p-fileUpload不会在上载处理程序。 您能帮我解决这个问题吗？

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

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

Answer 1

如果您隐藏了上载按钮，则需要另一种捕获所选文件的方法。 一种方法是使用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))
        }));
    }
}

然后，如果您提交表单，文件应该发送出去。