angular - PrimeNG - 通过单击按钮发送表单数据和 FileUpload 数据

Question

在我们的 Angular 项目中，我们有一个包含表单字段和 PrimeNG FileUpload 的表单，我们尝试发送包含所选文件的表单数据。

我们查看了documentation以及网络上的许多示例，但没有一个满足我们的要求(使用“保存”按钮而不是自动上传或“文件上传”按钮发送表单和文件)。

我们尝试了以下方法，将每个模型属性附加到文件上传请求中的文件，但我认为必须有更智能的方法，即在 Save 方法(在 .ts 文件中)中将文件附加到模型属性。

HTML:

<p-fileUpload name="files" url="/MyController/Save" 
    (onBeforeSend)="onBeforeSendFile($event)" 
    (onUpload)="onUploadFile($event)" 
    (onError)="onErrorFile($event)" 
    (onBeforeUpload)="onBeforeUploadFoto($event)" 
    multiple="multiple" 
    chooseLabel="Select" 
    uploadLabel="Load" 
    cancelLabel="Cancel">
</p-fileUpload>

.ts:

//code omitted fo brevity

//at here we append model properties to the array in file upload request:
onBeforeUploadFoto(event: any) {
    event.formData.append('id', this.entityId);
    event.formData.append('name', this.entityName);
}

Answer 1

您可以使用 onSelect 事件:

<p-fileUpload name="files" (onSelect)="dealWithFiles($event)"></p-fileUpload>

在你的组件中:

dealWithFiles(event) {
    files = event.originalEvent.files;
    // Deal with your files
    // e.g  assign it to a variable, and on submit add the variable to your form data
}

因为你想手动上传(通过另一个按钮)，然后通过添加隐藏默认上传按钮:

<p-fileUpload name="files" showUploadButton="false" (onSelect)="dealWithFiles($event)"></p-fileUpload>