Question

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

到目前为止，我们了解到映像将被转换为base64。但是，我们正在寻找的是如何将表单数据以及多个图像发送到Web 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中获取文件，但是如何在Web api的[FromBody]请求参数中获取此文件？这样，我就可以获取表单数据以及要上传的图像。

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

Answer 1

您可以使用 HttpClientModule

将base64数据发送到任何服务器API

只需执行以下代码更改

第1步：在app.module.ts中

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

在导入中包含HttpClientModule

第2步：在page.ts中

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

constructor(private httpClient: HttpClient) { }

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

 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

1 个答案: