Cómo cargar archivos desde Angular a ASP.NET Core Web API

Te sugerimos que revises esta solución en un entorno controlado antes de enviarlo a producción, un saludo.

Solución:

mi BlogController se ve así:

[HttpPost]

public async Task> PostBlog([FromForm]PostBlogModel blogModel)

Parece que le gustaría pasar datos usando form-data, para lograrlo, puede consultar el siguiente ejemplo de código.

.componente.html

  

      
          Blog Name
      
      
  

  

      
          Tile Image
      
      
  

  Create Blog

.componente.ts

selectedFile: File = null;
private newBlogForm: FormGroup;
constructor(private http: HttpClient)  

ngOnInit() 
  this.newBlogForm = new FormGroup(
    Name: new FormControl(null),
    TileImage: new FormControl(null)
  );


onSelectFile(fileInput: any) 
  this.selectedFile = fileInput.target.files[0];


onSubmit(data) 
  
  const formData = new FormData();
  formData.append('Name', data.Name);
  formData.append('TileImage', this.selectedFile);

  this.http.post('your_url_here', formData)
  .subscribe(res => 

    alert('Uploaded!!');
  );

  this.newBlogForm.reset();

Resultado de la prueba

Primero

encuadernación con uso angular ngModel o formControlName solo atrapará el value property
pero en realidad cuando enviamos el formulario necesitamos el files property para que podamos crear una directiva personalizada que se aplicará a todo el proyecto elementos, por lo que cuando enviamos el formulario obtuvimos la propiedad del archivo

Antes

import  Directive, forwardRef, HostListener, ElementRef, Renderer2  from '@angular/core';
import  NG_VALUE_ACCESSOR, ControlValueAccessor  from '@angular/forms';


@Directive(
    selector : `input[type=file][formControlName], 
    input[type=file][formControl],
    input[type=file][ngModel]`,
    providers: [
        
            provide: NG_VALUE_ACCESSOR,
            useExisting: FileValueAccessorDirective,
            multi: true
        
    ]
)
export class FileValueAccessorDirective implements ControlValueAccessor 

    constructor(private elementRef: ElementRef, private render: Renderer2) 

    

    // Function to call when the file changes.
    onChange = (file: any) => 


    //fire when the form value changed programmaticly
    writeValue(value: any): void 

    

    //fire only one time to register on change event
    registerOnChange = (fn: any) =>  this.onChange = fn; 


    //fire only one time to register on touched event
    registerOnTouched = (fn: any) =>  


    //Disable the input
    setDisabledState?(isDisabled: boolean): void 

    

    //listen to change event
    @HostListener('change', ['$event.target.files'])
    handleChange(file) 
        this.onChange(file[0]);
    

Después

Segundo

Para cargar un archivo usando Http, sus datos deben estar codificados usando multipart/form-data que permite que los archivos se envíen a través de una publicación http, por eso FormData se usa,

Un objeto FormData generará automáticamente datos de solicitud con tipo MIME multipart/form-data que los servidores existentes pueden procesar. Para agregar un campo de archivo a los datos, utiliza un objeto de archivo que una extensión puede construir a partir de la ruta del archivo. El objeto FormData puede simplemente pasarse a XMLHttpRequest:

Subir archivos Http

por lo que su método de envío debe ser como

onSubmit() 
      let formData: FormData = new FormData();
        Object.keys(this.newBlogForm.value).forEach(key => 
            formData.append(key, this.newBlogForm.value[key])
        );
    //pass formData to your service
  

tercero

En tus postBlog método que está creando Subject sin ningún beneficio, puede devolver http.post y luego, en el método de la persona que llama, use especificar si subscribe o usar async/await para hacer que la llamada http se dispare

onSubmit() 
   .....
    this.postBlog(formData).subscribe(
        result =>  
    );


async onSubmit() 
   .....
    let res = await this.postBlog(formData).toPromise();

Comentarios y valoraciones

Si te animas, tienes la opción de dejar una reseña acerca de qué te ha impresionado de esta división.

---

---

Utiliza Nuestro Buscador