Estoy enviando un archivo de imagen de Angular 13.0.4 a mi controlador Laravel 8 , pero Laravel no reconoce este archivo. Es como no enviar nada.
Cuando pruebo Postman o Insomnia funciona perfectamente bien.
Mi controlador Laravel es así:
public function uploadimage(Request $request) { if ($request->hasFile('image')) { return response()->json(["message" => "A file was sent!"]); } else { return response()->json(["message" => "No file sent!"]); } }El cartero regresa ¡Se envió un archivo! , retornos angulares blancos ¡No se ha enviado ningún archivo!
Mi Courses.component.ts es así:
export class CoursesComponent { constructor(private http:HttpClient) { } filedata:any; /* File onchange event */ fileEvent(e:any){ this.filedata = e.target.files[0]; } /* Upload button functioanlity */ onSubmitform(f: NgForm) { var myFormData = new FormData(); const headers = new HttpHeaders(); headers.append('Content-Type', 'multipart/form-data'); headers.append('Accept', 'application/json'); myFormData.append('image', this.filedata); /* Image Post Request */ this.http.post('http://fener.tachyonstudio.com/api/sample-restful-apis', myFormData, { headers: headers }).subscribe(data => { console.log(data); }); }Y mi Courses.component.html es así:
<form #f="ngForm" (ngSubmit)="onSubmitform(f)" enctype='multipart/form-data'> <input type="file" name="image" (change)="fileEvent($event)"/> <button>Upload Image</button> </form>Soy nuevo en Angular, por lo que he estado atrapado aquí durante bastante tiempo.
Intenta usar enctype en lugar de Content-Type
Así que reemplaza tu:
headers.append('Content-Type', 'multipart/form-data');por
headers.append('enctype', 'multipart/form-data');