1

Necesito adjuntar imagen desde el front, realizado con Angular 10, y enviarla a mi backend en Laravel 5.6, donde pretendo almacenarlas en el Storage. Tengo un ejemplo realizado con .blade.php, traté de trasladar la idea a Angular, pero no tuve éxito. Comparto lo que estoy haciendo para que me puedan ayuda.

Porción del .component.html

<div class="col-4">
    <label for='imagen'><b>Imagen</b></label>
</div>
<div class="col-4"> <input type="file" name="imagen" (change)="handleImage($event)"> </div>
     <button class="btn btn-secondary">Agregar Imagen</button>

Porción del .component.ts

   handleImage(event:any):void{
    this.image=event.target.files[0];
    console.log('IMAGE',this.image);
    this._procedimientosService.addImage(this.image).subscribe(
      response=>{
        console.log(response);
      },
      error=>{
        console.log(<any>error);
      }
    );
  }

service.ts (editado)

addImage(image: any):Observable<any>{
   let form = new FormData();
   form.append('image',image,'image');
   form.append('Content-Type','multipart/form-data');
   console.log(form);
   let headers=new HttpHeaders().set('Content-Type','multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW');
    return this._http.post(this.url+'add-image-post',form,{headers: headers});
   }

Quiero comentar que tuve que agregar el boundary, lo saque de una consulta de stackoverflow en inglés, es la única forma que el archivo viaje, de lo contrario por consola tengo el siguiente error.

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost/api/public/api/add-image-post", ok: false, …}
error: {error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: "<br />↵<b>Warning</b>:  Missing boundary in multip…{},"cookies":{},"headers":{}},"status":"success"}"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for http://localhost/api/public/api/add-image-post"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost/api/public/api/add-image-post"
__proto__: HttpResponseBase  

En lavarel, en el controlador, trato de recibirla de la siguiente manera.

public function addImage(Request $request){
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: *');
    $image=$request->file('image');
    if($image){
        $image_path=$image->getClientOriginalName();
        \Storage::disk('images')->put($image_path, \File::get($image));
    }
    $data=array(
        'imagen'=>$request,
        'status'=>'success'
    );
    return response()->json($data,200);
}

El actual return que tiene, es solo para saber que lo que envío desde el front llega, nada más, luego hare el mapeo para guardarlas y levantarlas como corresponde.

Si hago una petición usando Postman, la imagen se guarda correctamente. Si envío la imagen desde el front-end, no recibo error, pero no se guarda.

Yo para saber si lo que envió desde el front, es lo mismo que recibe si lo hago del postman, comparé las respuestas, haciendo que me devuelva $request

Respuesta del postman

{
    "imagen": {
        "attributes": {},
        "request": {},
        "query": {},
        "server": {},
        "files": {},
        "cookies": {},
        "headers": {}
    },
    "status": "success"
}

No puedo acceder al contenido de los campos del objeto.

Respuesta desde el front, por consola del navegador.

respuesta desde la consola del front-end

Y aquí puedo ver que hay dentro de cada elemento.

Otro dato, si yo le pido desde el backend que me devuelva

          $image=$request->file('image'); 
$data=array(
            'imagen'=> $image,
            'status'=>'success'
        );
        return response()->json($data,200);

Obtengo, si la envío desde el Postman,

{
    "imagen": {},
    "status": "success"
}

y desde el front

introducir la descripción de la imagen aquí

Por lo que me parece que tengo problemas al querer hacer

$image=$request->file('image'); 

cuando envío desde el front.

Espero de esta forma tener información para que puedan indicarme mejor como solucionar el problema, agradezco a Danilo, que va respondiendo mis preguntas y gracias a ello llegué hasta aquí.

Desde ya muchas gracias.

2 respuestas 2

3

Tu código está correcto, lo único que hace falta es configurar en el header de la petición que multipart/form-data para que la imagen también viaje con la petición.

Sustituye el header: application/x-www-form-urlencoded por multipart/form-data y con eso debería de funcionar el envío de la imagen.

Si eso no funciona, intenta con lo siguiente:

addImage(image: any):Observable<any> {
    let form = new FormData();
    form.append('image', form);
    let headers=new HttpHeaders().set('Content-Type','multipart/form-data');
    return this._http.post(this.url+'add-image-post',form,{headers: headers});
}

Referencias: https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest/FormData y https://developer.mozilla.org/es/docs/Web/Guide/Usando_Objetos_FormData

6
  • Gracias por responder. Si cambio solo el header, tengo un error del sevidor, copio la primera parte del mensaje.error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad ............
    – FerMV
    Commented el 9 nov. 2020 a las 14:56
  • Al tratar de modif. el service.ts, me da error dentro de form.append('image',form); me subraya form como "Argument of type 'FormData' is not assignable to parameter of type 'string | Blob'. Type 'FormData' is missing the following properties from type 'Blob': size, type, arrayBuffer, slice, and 2 more"
    – FerMV
    Commented el 9 nov. 2020 a las 14:58
  • Prueba cambiar la variable form en el método addImage por let form: any = new FormData(); Commented el 9 nov. 2020 a las 17:42
  • Danilo, gracias una vez mas. Ya pude corregir en código en el servicio, (al menos no me muestra error), pero me parece que al problema lo tengo el backend, la consola muestra error: "...SyntaxError: Unexpected token.." , cuando quiero hacer una petición desde Postman, cargo la imagen y me muestra los campos vacios. {"imagen":{"attributes":{},"request":{},"query":{},"server":{},"files":{},"cookies":{},"headers":{}},"status":"success"}
    – FerMV
    Commented el 10 nov. 2020 a las 12:19
  • Pude hacer funcionar el backend, si cargo desde postman, guarda perfecto la imagen, pero desde el front, creo que la falla está segun este mensaje; "<br />↵<b>Warning</b>: Missing boundary in multip… data in <b>Unknown</b> on line <b>0</b><br />↵[]" no le llega el atributo multipart pero ya estamos mas cerca
    – FerMV
    Commented el 10 nov. 2020 a las 13:36
2

después de casi 2 semanas de búsqueda, encontré una solución que comparto a continuación.

Primero muestro el backend, en laravel para que quede claro que debemos recibir. El método dentro del controlador queda así:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Facades\Storage;
use Symfony\Component\HttpFoundation\Response; 

class ProcedimientosController extends Controller
{
   public function addImage(Request $request){
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Headers: *');
          $image=$request->file('image');
       
          if($image){
            $image_path=$image->getClientOriginalName();
           \Storage::disk('images')->put($image_path, \File::get($image));
           
    }
         $data=array(
         
            'image'=>$image, 
            'status'=>'success'
        );
        return response()->json($data,200);
    }
}

Ahora desde angular, comenzamos por el component.html

<form #imageForm="ngForm" (ngSubmit)="enviarImagen()">
        <div class="col-4">
            <label for='imagen'><b>Imagen</b></label>
        </div>
        <div class="col-4"> <input type="file" name="imagen" #imagen="ngModel" [(ngModel)]="image" (change)="cargarImagen($event)"> </div>
        <button type="subtmit" class="btn btn-info">Agregar Imagen</button>
    </form>

el component.ts

import { Component, OnInit } from '@angular/core';
import {NgForm, ReactiveFormsModule}                        from '@angular/forms';
import {FormControl,FormGroup,Validators}                                from '@angular/forms';
import { GLOBAL } from 'src/app/services/global';
import { ProcedimientosService } from 'src/app/services/procedimientos.service';



@Component({
  selector: 'app-nuevo',
  templateUrl: './nuevo.component.html',
  styleUrls: ['./nuevo.component.css']
})
export class NuevoComponent implements OnInit {
  selectedFile: File=null;
constructor(
private _procedimientosService: ProcedimientosService
) { }
cargarImagen(event){
    this.selectedFile=<File>event.target.files[0]
     }

   enviarImagen(){
     this._procedimientosService.onUpload(this.selectedFile).subscribe(
       response=>{
          if(response.status=='success'){
            console.log(response);
          }
       },
       error=>{
         console.log(<any>error);
       }
     );
     
   }
}

y por último el service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders }  from '@angular/common/http'; 
import { Observable }               from 'rxjs';
import { GLOBAL }                   from './global';



@Injectable({
  providedIn: 'root'
})
export class ProcedimientosService {
  public url: string;

  constructor(
    public _http: HttpClient,
  ) {
    this.url = GLOBAL.url;
   }


onUpload(file):Observable<any>{
  const fd= new FormData;
  fd.append('image',file,file.name);
  return   this._http.post(this.url+'add-image-post',fd); 
}
}

Nótese que GLOBAL contiene la url de mi proyecto Como podrán observar, ni siquiera configura el header en la petición, pero funciona a la perfección. Espero que le sirva a alguien más y agradezco muchísimo a los que aportaron con sus ideas y comentarios.

Referencia: https://www.youtube.com/watch?v=YkvqLNcJz3Y

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.