Ich weiß, dass dies eine sehr allgemeine Frage ist, aber ich kann keine Datei in Angular 2 hochladen. Ich habe es versucht
1) http://valor-software.com/ng2-file-upload/ und
2) http://ng2-uploader.com/home
...aber scheiterte. Hat jemand eine Datei in Angular hochgeladen? Welche Methode haben Sie angewendet? Wie geht das? Wenn ein Beispielcode oder ein Demo-Link bereitgestellt wird, wird dies sehr geschätzt.
angular
file-upload
angular2-http
heman123
quelle
quelle
headers.append('enctype', 'multipart/form-data');
(benutzte 'enctype', um 'Content-Type' zu ersetzen). Vielleicht hängt es vom serverseitigen Code ab. (dh api)Aus den obigen Antworten baue ich dies mit Angular 5.x.
Rufen Sie einfach
uploadFile(url, file).subscribe()
an, um einen Upload auszulösenVerwenden Sie es so in Ihrer Komponente
quelle
let params = new HttpParams(); let headers = new HttpHeaders({ 'Authorization': 'Bearer ' + localStorage.getItem('accessToken'), }); const options = { headers: headers, params: params, reportProgress: true, };
Observable
undHttpEvent
vollständig weggelassen werden könnten, wenn Sie die Typinferenz verwenden können, um den Rückgabetyp der Funktion für bereitzustellenuploadFile()
!this.http.request()
gibt bereits einen Typ von zurückObservable<HttpEvent<{}>>
, also wenn Sie dem Anforderungsaufruf einen generischen Typ geben (dhthis.http.request<any>()
dann funktioniert die gesamte Funktion nur mit den richtigen Typen.input type="file" (change)="addFiles($event)" style="display: none" #file multiple> <button mat-raised-button color="primary" (click)="selectFile($event)">Upload File </button>
Danke an @Eswar. Dieser Code hat bei mir perfekt funktioniert. Ich möchte der Lösung bestimmte Dinge hinzufügen:
Ich habe eine Fehlermeldung erhalten:
java.io.IOException: RESTEASY007550: Unable to get boundary for multipart
Um diesen Fehler zu beheben, sollten Sie den "Inhaltstyp" "Multipart / Formulardaten" entfernen. Es hat mein Problem gelöst.
quelle
multipart/form-data; boundary=---------------------------186035562730765173675680113
. Siehe auch stackoverflow.com/a/29697774/1475331 und github.com/angular/angular/issues/11819 .java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found"
der Ihrem ähnlich ist. Wenn ich jedoch denContent-Type
Header entferne, erhalte ich stattdessen einen 404 aus dem Backend. Wir verwenden Spring und Angular 2. Jede Hilfe wird geschätzt.Da das Codebeispiel etwas veraltet ist, dachte ich, ich würde einen neueren Ansatz mit Angular 4.3 und der neuen (er) HttpClient-API @ angle / common / http teilen
quelle
In Angular 2+ ist es sehr wichtig , den Inhaltstyp leer zu lassen. Wenn Sie den 'Content-Type' auf 'multipart / form-data' setzen, funktioniert der Upload nicht!
upload.component.html
upload.component.ts
quelle
Ich habe das folgende Werkzeug aus der Grundierung mit Erfolg verwendet. Ich habe keine Haut im Spiel mit primeNg, ich gebe nur meinen Vorschlag weiter.
http://www.primefaces.org/primeng/#/fileupload
quelle
Diese einfache Lösung hat bei mir funktioniert: file-upload.component.html
Führen Sie dann den Upload in der Komponente direkt mit XMLHttpRequest durch .
Wenn Sie den Dotnet-Kern verwenden, muss der Parametername mit dem Absendernamen übereinstimmen. Dateien in diesem Fall:
Diese Antwort ist ein Plagiat von http://blog.teamtreehouse.com/uploading-files-ajax
Bearbeiten : Nach dem Hochladen müssen Sie den Datei-Upload löschen, damit der Benutzer eine neue Datei auswählen kann. Und anstatt XMLHttpRequest zu verwenden, ist es vielleicht besser, fetch zu verwenden:
https://github.com/yonexbat/cran/blob/master/cranangularclient/src/app/file-upload/file-upload.component.ts
quelle
Dies ist ein nützliches Tutorial zum Hochladen von Dateien mit dem ng2-Datei-Upload und OHNE ng2-Datei-Upload.
Für mich hilft es sehr.
Im Moment enthält das Tutorial einige Fehler:
1- Der Client sollte dieselbe Upload-URL wie ein Server haben, also in der
app.component.ts
Änderungszeileconst URL = 'http://localhost:8000/api/upload';
zu
const URL = 'http://localhost:3000';
2- Server senden Antwort als 'Text / HTML', also in
app.component.ts
Änderungzu
quelle
Hochladen von Bildern mit Formularfeldern
In meinem Fall brauchte ich .NET Web Api in C #
quelle
Heute wurde mir das ng2-Datei-Upload- Paket in meine Angular 6-Anwendung integriert. Es war ziemlich einfach. Bitte finden Sie den folgenden allgemeinen Code.
Importieren Sie das ng2-Datei-Upload- Modul
app.module.ts
Komponente ts Datei importieren FileUploader
app.component.ts
Komponenten-HTML-Tag zum Hinzufügen von Dateien
app.component.html
Working Online stackblitz Link: https://ng2-file-upload-example.stackblitz.io
Beispiel für einen Stackblitz-Code: https://stackblitz.com/edit/ng2-file-upload-example
Offizieller Dokumentationslink https://valor-software.com/ng2-file-upload/
quelle
Versuchen Sie, den
options
Parameter nicht einzustellenthis.http.post(${this.apiEndPoint}, formData)
und stellen Sie sicher, dass Sie das nicht
globalHeaders
in Ihrer HTTP-Fabrik einstellen .quelle
In der einfachsten Form funktioniert der folgende Code in Angular 6/7
Hier ist die komplette Implementierung
quelle
jspdf und Angular 8
Ich erstelle ein PDF und möchte das PDF mit POST-Anfrage hochladen. So gehe ich vor (Aus Gründen der Übersichtlichkeit lösche ich einen Teil der Code- und Serviceschicht).
quelle
Ich habe eine Datei mit Referenz hochgeladen. Zum Hochladen der Datei auf diese Weise ist kein Paket erforderlich.
// Code, der in die .ts-Datei geschrieben werden soll
}}
// Code, der in die Datei service.ts geschrieben werden soll
}}
// Code, der in HTML geschrieben werden soll
quelle