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

【问题标题】：primeNG p-fileUpload Custome mode callback not triggeringprimeNG p-fileUpload 自定义模式回调未触发
【发布时间】：2019-05-06 13:59:08
【问题描述】：

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

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

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

【问题讨论】：

我认为这是因为您使用[showUploadButton]="false" 隐藏了上传按钮，因此永远不会触发上传处理程序。我之前使用过onSelect 事件来处理自定义上传，但这取决于您的确切要求。
另一种选择，可能是在选择文件后立即使用auto="true" 开始上传
@mahi 我尝试将 event.files 存储在另一个变量（onselect）上，然后当用户单击提交按钮试图将这些数据发送到服务器时......
你必须展示你的代码来弄清楚为什么它是空的。我将使用onSelect 发布一个带有示例的答案，这可能会有所帮助

标签： angular primeng

【解决方案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))
        }));
    }
}

那么文件应该会在您提交表单时发送。

【讨论】：