Question

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

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

我们通过将每个模型属性附加到文件上载请求中的文件来尝试以下方法，但我认为必须通过将文件附加到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>

Answer 2

添加对p-fileUpload的引用，以便您可以从 Save 方法对其调用upload方法。

<p-fileUpload #fileInput name="files" ...

和

@ViewChild('fileInput') fileInput: FileUpload;

// ...

// save method manually called by clicking on your Save button
save() {
    if (this.fileInput && this.fileInput.files.length > 0) {
        this.fileInput.upload();
    }
}

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

2 个答案: