Отправить изображение с ионного на основной веб-API asp.net - PullRequest
Новая
       10

Отправить изображение с ионного на основной веб-API asp.net

0 голосов
/ 17 октября 2019

Мы хотим выгрузить изображение из ionic в .net core web api. Для этого мы используем плагин для передачи файлов.

Итак, мы поняли, что изображение будет конвертировано в base64. Однако, что мы ищем, так это как мы можем отправить данные формы вместе с несколькими изображениями в веб-API?

Ниже приведен код с ионной стороны.

HTML-код для активации выбора изображенияфункция: 

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

Код файла компонента для загрузки изображения с помощью ионной камеры Плагин: 

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();
      });

  }

Код файла компонента для передачи изображения вweb api: 

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));
        });
      }

Таким образом, мы можем получить файл в HttpContext.Request.Form.Files, но как мы можем получить это в параметре запроса [FromBody] в web api? Таким образом, я могу получить данные формы и изображения для загрузки.

Кроме того, мы попытались добавить только один параметр запроса в веб-API, предполагая, что base64, переданный со стороны клиента, будет получен в inпараметр запроса. Но это также не сработало, что привело к ошибке «Значение не может быть нулевым».

1 Ответ

1 голос
/ 17 октября 2019

Вы можете отправить данные base64 на любой серверный API с помощью HttpClientModule

Просто выполните следующие изменения в своем коде

Шаг 1: В app.module.ts 

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

включает HttpClientModule в импорт

Шаг 2: In page.ts 

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

constructor(private httpClient: HttpClient) { }

Инициализируйте HttpClient в конструкторе 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
    });
  }

Happy Coding: -)

...