将图像从离子发送到asp.net核心Web API [英] Send image from ionic to asp.net core web api

问题描述

我们希望将图像从离子图像上传到.net核心Web API.为此，我们使用了文件传输插件.

We are looking to upload image from ionic to .net core web api. To achieve this we are using file transfer plugin.

到目前为止，我们了解到映像将被转换为base64.但是，我们正在寻找的是如何将表单数据以及多个图像发送到Web api?

So, far we understood that image will be converted into base64. However, what we are looking is how can we sent form data along with multiple image to web api?

下面是离子方面的代码.

Below is the code from ionic side.

用于触发选择图片功能的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中获取文件，但是如何在Web api的[FromBody]请求参数中获取文件?这样，我就可以获取表单数据以及要上传的图像.

By doing this we are able to get the file in HttpContext.Request.Form.Files, but how can we get this in [FromBody] request parameter in web api? So, that I can get form data as well images to upload.

此外，我们尝试通过在Web api中仅添加一个请求参数，并假设将从客户端传递的base64接收到in请求参数中.但这也行不通，它给出了错误值不能为空".

Also, we have tried by adding only one request parameter in web api, by assuming that the base64 which passed from client side will be received at in request parameter. But this also didn't work, which has given error 'Value cannot be null'.

推荐答案

您可以使用 HttpClientModule

只需执行以下代码更改

第1步:在app.module.ts中

Step 1: In app.module.ts

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

在导入中包含HttpClientModule

include HttpClientModule in imports

第2步:在page.ts中

Step 2: In page.ts

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

constructor(private httpClient: HttpClient) { }

在page.ts的构造函数中初始化HttpClient

Initialise HttpClient in the constructor of 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
    });
  }

快乐编码:-)

这篇关于将图像从离子发送到asp.net核心Web API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！