Enviar imagen de ionic a asp.net core web api

XamDev 2019-10-17 09:19.

Estamos buscando cargar una imagen de ionic a .net core web api. Para lograr esto, estamos utilizando el complemento de transferencia de archivos.

Hasta ahora entendimos que la imagen se convertirá en base64. Sin embargo, lo que estamos buscando es ¿cómo podemos enviar datos de formulario junto con varias imágenes a la API web?

A continuación se muestra el código del lado iónico.

Código HTML para activar la función de selección de imagen:

<ion-button fill="clear" expand="full" color="light" (click)="selectImage()">
      <ion-icon slot="start" name="camera"></ion-icon>
      Select Image</ion-button>

Código de archivo de componente para cargar la imagen usando el complemento de cámara iónica:

async selectImage() {
      const actionSheet = await this.actionSheetController.create({
          header: "Select Image source",
          buttons: [{
                  text: 'Load from Library',
                  handler: () => {
                      this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
                  }
              },
              {
                  text: 'Use Camera',
                  handler: () => {
                      this.takePicture(this.camera.PictureSourceType.CAMERA);
                  }
              },
              {
                  text: 'Cancel',
                  role: 'cancel'
              }
          ]
      });
      await actionSheet.present();
  }

  takePicture(sourceType: PictureSourceType) {
      var options: CameraOptions = {
          quality: 100,
          sourceType: sourceType,
          saveToPhotoAlbum: false,
          correctOrientation: true
      };

      this.camera.getPicture(options).then(imagePath => {
        this.base64img="data:image/jpeg;base64,"+imagePath;
        this.uploadPic();
      });

  }

Código de archivo de componente para pasar la imagen a la API web:

uploadPic() {
        const fileTransfer: FileTransferObject = this.transfer.create();
        let filename = this.base64img.split('/').pop();
        let options: FileUploadOptions = {
            fileKey: "file",
            fileName: filename,
            chunkedMode: false,
            mimeType: "image/jpg",
            params: { 'title': this.imageTitle }
        }

        fileTransfer.upload(this.base64img, '<api endpoint>', options).then(data => {
          alert(JSON.stringify(data));
        }, error => {

          alert("error");
          alert("error" + JSON.stringify(error));
        });
      }

Al hacer esto, podemos obtener el archivo HttpContext.Request.Form.Files, pero ¿cómo podemos obtenerlo en el parámetro de solicitud [FromBody] en la API web? Entonces, puedo obtener datos de formularios e imágenes para cargar.

Además, hemos intentado agregar solo un parámetro de solicitud en la API web, asumiendo que la base64 que pasó del lado del cliente se recibirá en el parámetro de solicitud. Pero esto tampoco funcionó, lo que ha dado el error 'El valor no puede ser nulo'.

ionic-framework asp.net-core ionic4 asp.net-core-webapi

1 answers

Shailesh Bhokare 2019-10-17 17:31.

Puede enviar datos base64 a cualquier API de servidor usando HttpClientModule

Simplemente haga los siguientes cambios en su código

Paso 1: en app.module.ts

import { HttpClientModule } from '@angular/common/http';

incluir HttpClientModule en las importaciones

Paso 2: en page.ts

import { HttpClient } from '@angular/common/http';

constructor(private httpClient: HttpClient) { }

Inicialice HttpClient en el constructor de page.ts

 sendData(base64img,other_data) {
    let _url = "";
    let formData = new FormData();
    formData.append("base64img", base64img);
    formData.append("other_data", other_data);
    this.httpClient.post(_url, formData).subscribe((res) => {
    //res contains server response
    });
  }

Codificación feliz :-)

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar: Todo lo que ha dicho sobre el amor y su ventana de 5 años para encontrar al 'Elegido'

Jana Duggar ha sido abierta sobre su búsqueda del amor. Aquí está todo lo que ha dicho sobre el tema y su ventana de cinco años para el matrimonio.

2023-06-12.

Sam Heughan sabe exactamente lo que tomará del set de 'Outlander': 'Me siento como si fuera Jamie cuando me los pongo'

La estrella de 'Outlander', Sam Heughan, reveló recientemente qué se llevará del set para recordar a Jamie Fraser, el papel que lo convirtió en una estrella.

2023-06-12.

La primera canción de los Beatles que fue una de las 'actuaciones más emocionantes' de la banda, según Fab Four Insider

'She Loves You' fue escrita en una hora, grabada en un día y fue la canción de The Beatles con una de las mejores interpretaciones de su carrera.

2023-06-11.

Dolly Parton ayudó a su abuela 'inválida' cuando ninguno de los otros nietos lo haría: también le hacía una broma

Dolly Parton y su abuela Bessie tenían una relación especial. La abuela Parton estaba muy enferma, pero eso no impidió que Dolly le hiciera una broma.

2023-06-11.

Las 10 especies de monos más "feas": Belleza poco convencional en los primates

Algunos monos tienen mucha suerte con la genética. ¿Otros? No tanto. El mono más feo no es una sola especie, sino toda una galería de primates que te hacen mirar dos veces y preguntarte si la evolución te estaba jugando una broma.

2025-11-18.

10 de las criaturas marinas más aterradoras que acechan en las profundidades del océano

El océano rebosa belleza, pero también esconde algunas de las criaturas marinas más aterradoras del planeta. Muchos de estos animales acechan en las profundidades oceánicas, en el oscuro y opresivo mundo de alta presión del océano.

2025-10-29.

Los 10 mejores encantamientos de espada en Minecraft

Si te enfrentas a monstruos hostiles o te preparas para combates PvP, conocer los mejores encantamientos para espadas en Minecraft puede darte una gran ventaja. Encantar espadas te permite infligir más daño, aumentar los objetos que sueltan los monstruos y prolongar la durabilidad de tu espada.

2025-10-29.

Furgoneta de reparto de Amazon se enciende en una ardiente explosión durante el calor del verano en Houston

Imágenes de drones capturaron a los bomberos que parecían tener dificultades para apagar el incendio.

2024-07-03 19:04.

Black Panther Show de Marvel será el programa animado más crucial hasta el momento

Eyes of Wakanda se vincula directamente con la MCU, además de actualizaciones sobre X-Men '97, What If..., Daredevil y más.

2024-07-03 19:03.

Todo sobre el impresionante anillo de compromiso de zafiro de Kate Middleton (¡y la reliquia real en la que se inspiró!)

El anillo de compromiso de Kate Middleton perteneció a la princesa Diana antes de que el príncipe William le propusiera matrimonio con él. Descubra todo lo que hay que saber sobre esta pieza histórica aquí.

2024-09-01.

¿Quién es la esposa de Patton Oswalt? Todo sobre Meredith Salenger

Patton Oswalt se casó con su esposa, la también actriz Meredith Salenger, en 2017. Aquí encontrará todo lo que debe saber sobre la esposa de Patton Oswalt, Meredith Salenger.

2024-06-16.

¿Quién es la esposa de Jason Kennedy? Todo sobre Lauren Scruggs Kennedy

Aquí encontrará todo lo que debe saber sobre Lauren Scruggs Kennedy, la bloguera de moda y autora de best sellers del New York Times que espera su segundo hijo con la personalidad de televisión Jason Kennedy.

2023-09-24.

3 formas comprobadas de mejorar su habilidad de escritura

Los beneficios de escribir y estrategias para ayudarte a hacerlo

En 2022, con el lanzamiento de GPT-3, la habilidad de escritura parece perder importancia. Con IA, las personas con mala escritura también pueden generar personal de calidad.

La erosión lenta: revelando las formas en que las personas se desgastan en sus carreras

En el mundo acelerado y competitivo de hoy, la carrera de uno juega un papel importante en el crecimiento personal, la estabilidad financiera y la satisfacción general con la vida. Sin embargo, muchas personas se encuentran atrapadas en un ciclo implacable de estancamiento e insatisfacción, y su vida profesional se desvanece gradualmente.

¿Qué hace que un podcast sea influyente?

La semana pasada noté un comunicado de prensa, enviado a través de PressGazette (un sitio web de noticias de los medios británicos). El artículo anunciaba que Acast, la empresa de publicidad y alojamiento de podcasts de Scandi, lideraría un consorcio de editores "probablemente los más influyentes" en podcasting.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi