将图像从离子发送到asp.net核心Web API

本文介绍了将图像从离子发送到asp核心Web API的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

We are looking to upload image from ionic to 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 }); }

快乐编码:-)