Estoy tratando de crear una funcionalidad de carga de archivos en la que un usuario pueda cargar geotiff (podría tener varios GB de tamaño). Por alguna razón, mi código angular no puede acceder a la API y arroja 404, pero puedo cargar el archivo con Postman.
Código Angular:
fileChange(event) { let token = localStorage.getItem('userToken'); let fileList: FileList = event.target.files; if (fileList.length > 0) { let file: File = fileList[0]; let formData: FormData = new FormData(); formData.append('files', file, file.name); let headers = new Headers(); headers.append('Content-Type', 'multipart/form-data'); headers.append("Authorization", token); let options = new RequestOptions({ headers: headers }); this.uploadInProgress = true; this._http.post(`${this.uploadApiUrl}`, formData, options) .map(res => res.json()) .catch(error => Observable.throw(error)) .subscribe( data => console.log('success'), error => console.log(error), () => this.uploadInProgress = false) } }API:
// POST: api/GeoTif [HttpPost] public async Task<IActionResult> Post(List<IFormFile> files) { long size = files.Sum(f => f.Length); return Ok(new { NoOfUploadedFileCount = files.Count, TotalFileSize =size }); }Entiendo que hay un problema con el servicio HTTP y FormData... puede usar XMLHttpRequest para lograrlo:
fileChange(event: Event) { this.uploadFile(event) .subscribe(() => { console.log('sent'); }) } private uploadFile(event: Event) { return Observable.create(observer => { const token = localStorage.getItem('userToken'); const fileList = event.target.files; if (fileList.length > 0) { const file = fileList[0]; const formData = new FormData(); const xhr = new XMLHttpRequest(); formData.append('files', file, file.name); this.uploadInProgress = true; xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { observer.next(JSON.parse(xhr.response)); observer.complete(); } else { observer.error(xhr.response); } this.uploadInProgress = false; } } xhr.open('POST', this.uploadApiUrl, true); xhr.send(formData); } }); }Agregue su URL con http:// (Ej: http://localhost/api/GeoTif/ ). Y elimine el siguiente código.
headers.append('Content-Type', 'multipart/form-data'); headers.append("Authorization", token);