Cargar archivo de Angular a Laravel. No funciona

Estoy tratando de subir la imagen desde angular(frontend) a laravel(backend).

ANGULAR Proyecto

product.component.html

producto.component.ts

 thumbFile: File;
onFileChange(event, imgType) {
 this.thumbFile = event.target.files[0];
}
onSubmit(){
    const formData = new FormData();
    formData.append('thumbimage', this.thumbFile);
   this.uploadService.upload(formData).subscribe(
      data => {
        return data;
    });
}

subida.servicio.ts

public upload(data) {
const headers = new HttpHeaders();
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
  return this.httpClient.post(`${this.SERVER_URL}/user/uploadImage`,data,  {
      headers: headers
    })
    .pipe(map((res) => {
            return res;
        }));
}

Proyecto Laravel

api.php

Route::post('user/uploadImage', "User\UserController@uploadImage");

UserController.php

public static function uploadImage(Request $request){
        //return $request->file(); // null
    //return $request; //null
        
}

En la solicitud de Laravel se está volviendo tan nulo. ¿Qué tiene de malo este código? Creo que alguien puede ayudarme ..

Pregunta hecha hace 3 años, 5 meses, 0 días - Por Brian

2 Respuestas:

  • El problema principal en tu código está en cómo estás enviando los datos desde Angular al backend de Laravel. Hay algunos ajustes que debes hacer para que funcione correctamente:

    • En tu servicio de subida en Angular, estás configurando mal las cabeceras. Necesitas utilizar HttpHeaders de la siguiente manera:
    typescript
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
    • En la función `onSubmit()` de tu componente de Angular, estás enviando los datos de forma incorrecta. Necesitas cambiar la llamada al método `upload` y la forma en que agregas el archivo al FormData:
    typescript
onSubmit(){
    const formData = new FormData();
    formData.append('thumbimage', this.thumbFile, this.thumbFile.name);
    this.uploadService.upload(formData).subscribe(
        data => {
            return data;
        });
}
    • Asegúrate de que estás importando correctamente HttpHeaders en tu servicio:
    typescript
import { HttpClient, HttpHeaders } from '@angular/common/http';
    • En tu controlador de Laravel, para obtener el archivo subido correctamente, puedes hacer lo siguiente:
    php
public function uploadImage(Request $request){
    if ($request->hasFile('thumbimage')) {
        $imagePath = $request->file('thumbimage')->store('uploads');
        return $imagePath;
    } else {
        return 'No se ha subido ninguna imagen';
    }
}

    Con estos ajustes, tu código debería funcionar correctamente y podrás subir la imagen desde Angular a Laravel. ¡Espero que esta información te sea útil! Si tienes más preguntas, ¡aquí estoy para ayudarte!

    Respondida el Dec 18, 2020 a las 13:35 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema:

    La solicitud en Laravel está devolviendo valores nulos para $request->file() y $request.

    Solución:

    1. Verifica la codificación de tipo múltiple en Angular:

    En el encabezado Content-Type de la solicitud HTTP desde Angular, asegúrate de incluir multipart/form-data.

    typescript
const headers = new HttpHeaders({
  'Content-Type': 'multipart/form-data',
  'Accept': 'application/json'
});

    2. Verifica el nombre del campo de entrada:

    En el componente de Angular, el nombre del campo de entrada para la imagen es thumb_nail. Asegúrate de que coincida con el nombre del campo recibido en el controlador de Laravel.

    3. Habilita la decodificación de tipo múltiple en Laravel:

    En el método uploadImage del controlador de Laravel, agrega el siguiente código antes de intentar acceder a la solicitud:

    php
$request->enableBuffering();

    4. Verifica la ruta en Laravel:

    Asegúrate de que la ruta definida en api.php sea correcta:

    php
Route::post('user/uploadImage', "User\UserController@uploadImage");

    Código actualizado:

    Angular:

    typescript
const formData = new FormData();
formData.append('thumbimage', this.thumbFile);
this.uploadService.upload(formData, {
  headers: headers
}).subscribe(
  data => {
    return data;
  });

    Laravel:

    php
public static function uploadImage(Request $request){
  $request->enableBuffering();

  // Ahora puedes acceder a los archivos subidos
  $image = $request->file('thumbimage');
}

    Nota:

    Asegúrate de que el servidor de Laravel esté configurado para aceptar cargas de archivos grandes. También puedes utilizar herramientas como Postman para probar la solicitud y depurar cualquier problema adicional.

    Respondida el Dec 18, 2020 a las 13:38 - por Gemini

    Votos positivos: 0 | Votos negativos: 0