webentwicklung-frage-antwort-db.com.de

PrimeNG - Senden von Formulardaten und FileUpload-Daten per Klick

In unserem Angular - Projekt haben wir ein Formular, das Formularfelder und PrimeNG FileUpload enthält, und wir haben versucht, Formulardaten mit den ausgewählten Dateien zu senden. 

Wir haben uns die Dokumentation und viele Beispiele im Web angesehen, aber keines davon erfüllt unsere Anforderungen (Senden von Formularen und Dateien über die Schaltfläche "Speichern" anstatt über den automatischen Upload oder die Schaltfläche "FileUpload"). 

Wir haben den folgenden Ansatz ausprobiert, indem Sie alle Modelleigenschaften an die Dateien in der Dateiuploadanforderung anhängen, aber ich denke, es muss ein intelligenterer Weg sein, indem Sie die Modelleigenschaften in der Save-Methode (in der .ts-Datei) anhängen. 

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);
}
6
Willys

Sie können das onSelect-Ereignis verwenden:

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

Und in Ihrer Komponente: 

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
}

Wenn Sie manuell hochladen möchten (durch eine andere Schaltfläche), verbergen Sie die Standard-Schaltfläche zum Hochladen, indem Sie Folgendes hinzufügen: 

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

Fügen Sie einen Verweis auf Ihren p-fileUpload hinzu, damit Sie die upload-Methode von Ihrer Save - Methode aus aufrufen können.

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

und

@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