我正在使用打字稿开发 Angular 2 应用程序。在我当前的项目中,我实现了将图像上传到天蓝色存储 blob 的功能,为此我点击了以下链接。
http://www.ojdevelops.com/2016/05/end-to-end-image-upload-with-azure.html http://www.ojdevelops.com/2016/05/end-to-end-image-upload-with-azure.html
我为视图编写了以下代码行,以从本地计算机中选择图像。
<form name="form" method="post">
<div class="input-group">
<input id="imagePath" class="form-control" type="file" name="file" accept="image/*" />
<span class="input-group-btn">
<a class="btn btn-success" (click)='uploadImage()'>Upload</a>
<!--href="../UploadImage/upload"-->
<!--(click)='uploadImage()'-->
</span>
</div>
</form>
My view will be like this below figure.
当我单击“上传”按钮时,在上传组件.ts文件我编写了以下代码行,用于发出 http post 请求以及作为所选图像路径的内容。
uploadImage(): void {
//var image = Request["imagePath"];
//alert('Selected Image Path :' + image);
this.imagePathInput = ((<HTMLInputElement>document.getElementById("imagePath")).value);
alert('Selected Image Path :' + this.imagePathInput);
let imagePath = this.imagePathInput;
var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');//application/x-www-form-urlencoded
this._http.post('/UploadImage/UploadImagetoBlob', JSON.stringify(imagePath),
{
headers: headers
})
.map(res => res.json())
.subscribe(
data => this.saveJwt(data.id_token),
err => this.handleError(err),
() => console.log('ImageUpload Complete')
);
}
上传图像控制器.cs
In the 上传图像控制器.cs文件我写了下面几行代码,用于将图像上传到天蓝色存储 blob。
[HttpPost]
[Route("UploadImage/UploadImagetoBlob")]
public async Task<HttpResponseMessage> UploadImagetoBlob()
{
try
{
//WebImage image = new WebImage("~/app/assets/images/AzureAppServiceLogo.png");
//image.Resize(250, 250);
//image.FileName = "AzureAppServiceLogo.png";
//img.Write();
var image = WebImage.GetImageFromRequest();
//WebImage image = new WebImage(imagePath);
var imageBytes = image.GetBytes();
// The parameter to the GetBlockBlobReference method will be the name
// of the image (the blob) as it appears on the storage server.
// You can name it anything you like; in this example, I am just using
// the actual filename of the uploaded image.
var blockBlob = blobContainer.GetBlockBlobReference(image.FileName);
blockBlob.Properties.ContentType = "image/" + image.ImageFormat;
await blockBlob.UploadFromByteArrayAsync(imageBytes, 0, imageBytes.Length);
var response = Request.CreateResponse(HttpStatusCode.Moved);
response.Headers.Location = new Uri("../app/upload/uploadimagesuccess.html", UriKind.Relative);
//return Ok();
return response;
}
catch (Exception ex)
{
Debug.WriteLine(ex.Message);
return null;
}
}
在上面的控制器代码中,下面的行代码始终给出空值。
var image = WebImage.GetImageFromRequest();
您能告诉我如何解决上述问题吗?
-Pradeep