web-dev-qa-db-ja.com

PrimeNG-ボタンのクリックでフォームデータとFileUploadデータを送信する

Angularプロジェクトには、フォームフィールドとPrimeNG FileUploadを含むフォームがあり、選択したファイルでフォームデータを送信しようとしました。

documentation とWeb上の多くの例を確認しましたが、いずれも要件（自動アップロードまたは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);
}
angulartypescriptfile-uploadprimeng
8
Jack

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>
2
RzoQe

Saveメソッドからuploadメソッドを呼び出すことができるように、p-fileUploadへの参照を追加します。

<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();
    }
}
1
Antikhippe