Wiem, że to bardzo ogólne pytanie, ale nie udaje mi się przesłać pliku w Angular 2. Próbowałem
1) http://valor-software.com/ng2-file-upload/ oraz
2) http://ng2-uploader.com/home
...ale zawiodło. Czy ktoś przesłał plik w Angular? Jakiej metody użyłeś? Jak to zrobić? Jeśli podany zostanie przykładowy kod lub link demonstracyjny, będzie to naprawdę mile widziane.
angular
file-upload
angular2-http
heman123
źródło
źródło
headers.append('enctype', 'multipart/form-data');
wierszem - (użyłem „enctype”, aby zastąpić „Content-Type”). Być może zależy to od kodu po stronie serwera. (tj. api)Z powyższych odpowiedzi buduję to za pomocą Angular 5.x
Po prostu zadzwoń,
uploadFile(url, file).subscribe()
aby uruchomić przesyłanieUżyj go w ten sposób w swoim komponencie
źródło
let params = new HttpParams(); let headers = new HttpHeaders({ 'Authorization': 'Bearer ' + localStorage.getItem('accessToken'), }); const options = { headers: headers, params: params, reportProgress: true, };
Observable
iHttpEvent
może zostać całkowicie pominięte, jeśli nie przeszkadza Ci używanie wnioskowania o typie w celu zapewnienia zwracanego typu funkcji dlauploadFile()
!this.http.request()
już zwraca typObservable<HttpEvent<{}>>
, więc jeśli podasz wywołanie żądania typ ogólny (tj.this.http.request<any>()
wtedy cała funkcja działa tylko z odpowiednimi typami.input type="file" (change)="addFiles($event)" style="display: none" #file multiple> <button mat-raised-button color="primary" (click)="selectFile($event)">Upload File </button>
Dzięki @Eswar. Ten kod działał idealnie dla mnie. Chcę dodać pewne rzeczy do rozwiązania:
Otrzymałem błąd:
java.io.IOException: RESTEASY007550: Unable to get boundary for multipart
Aby rozwiązać ten błąd, należy usunąć parametr „Content-Type” „multipart / form-data”. To rozwiązało mój problem.
źródło
multipart/form-data; boundary=---------------------------186035562730765173675680113
. : . Zobacz także stackoverflow.com/a/29697774/1475331 i 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"
który jest podobny do twojego, jednak kiedy usuwamContent-Type
nagłówek, zamiast tego otrzymuję 404 z zaplecza. Używamy Spring i Angular 2. Doceniamy każdą pomoc.Ponieważ przykładowy kod jest nieco przestarzały, pomyślałem, że podzielę się nowszym podejściem, używając Angular 4.3 i nowego (er) HttpClient API, @ angular / common / http
źródło
W Angular 2+ bardzo ważne jest, aby pole Content-Type było puste. Jeśli ustawisz „Content-Type” na „multipart / form-data”, przesyłanie nie będzie działać!
upload.component.html
upload.component.ts
źródło
Z sukcesem korzystałem z następującego narzędzia. Nie mam skórki w grze z primeNg, przekazuję tylko moją sugestię.
http://www.primefaces.org/primeng/#/fileupload
źródło
To proste rozwiązanie zadziałało dla mnie: file-upload.component.html
Następnie prześlij komponent bezpośrednio za pomocą XMLHttpRequest .
Jeśli używasz dotnet core, nazwa parametru musi być zgodna z nazwą pola od. pliki w tym przypadku:
Ta odpowiedź jest plagiatem http://blog.teamtreehouse.com/uploading-files-ajax
Edycja : Po przesłaniu musisz wyczyścić przesyłanie pliku, aby użytkownik mógł wybrać nowy plik. Zamiast używać XMLHttpRequest, może lepiej jest użyć funkcji pobierania:
https://github.com/yonexbat/cran/blob/master/cranangularclient/src/app/file-upload/file-upload.component.ts
źródło
Jest to przydatny samouczek , jak przesłać plik za pomocą przesyłania plików ng2 i BEZ przesyłania plików ng2.
Mnie to bardzo pomaga.
W tej chwili samouczek zawiera kilka błędów:
1- Klient powinien mieć taki sam adres URL przesyłania jak serwer, więc w
app.component.ts
linii zmianyconst URL = 'http://localhost:8000/api/upload';
do
const URL = 'http://localhost:3000';
2- Serwer wysyła odpowiedź jako „tekst / html”, więc ze
app.component.ts
zmianądo
źródło
Aby przesłać obraz z polami formularza
W moim przypadku potrzebowałem .NET Web Api w C #
źródło
Dzisiaj zostałem zintegrowany z pakietem wysyłania plików ng2 do mojej aplikacji angular 6. To było całkiem proste. Proszę znaleźć poniższy kod wysokiego poziomu.
zaimportuj moduł przesyłania plików ng2
app.module.ts
Import pliku komponentu ts FileUploader
app.component.ts
Znacznik dodawania pliku HTML komponentu
app.component.html
Działający link stackblitz online: https://ng2-file-upload-example.stackblitz.io
Przykład kodu Stackblitz: https://stackblitz.com/edit/ng2-file-upload-example
Oficjalny link do dokumentacji https://valor-software.com/ng2-file-upload/
źródło
Spróbuj nie ustawiać
options
parametruthis.http.post(${this.apiEndPoint}, formData)
i upewnij się, że nie ustawiasz
globalHeaders
w fabryce HTTP.źródło
W najprostszej formie poniższy kod działa w Angular 6/7
Oto pełna realizacja
źródło
jspdf oraz Angular 8
Generuję plik pdf i chcę przesłać plik pdf z żądaniem POST, tak to robię (dla jasności usuwam część kodu i warstwę usług)
źródło
Przesłałem plik za pomocą odwołania Do przesłania pliku w ten sposób nie jest wymagany żaden pakiet.
// kod do zapisania w pliku .ts
}
// kod do zapisania w pliku service.ts
}
// kod do napisania w html
źródło