使用typescript和angular2将图像上传到存储blob

Question

我正在使用typescript开发angular 2应用程序。在我目前的项目中，我实现了将图像上传到azure存储区的功能，为此，我遵循下面的链接。

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>  

我的看法如下图所示。

当我点击上传按钮，在uploadcomponent.ts文件I写的代码的下面行用于与内容作为选择的图像路径沿着使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') 
      ); 


    } 

UploadImageController.cs

在UploadImageController.cs文件I写下面用于上传的代码行图像分成Azure存储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

Answer 1

后。以下链接对于将选定图像上传到服务器或Azure存储区块非常有用。对于我的场景，我将选定的图像上传到存储空间中。

https://www.thepolyglotdeveloper.com/2016/02/upload-files-to-node-js-using-angular-2/

http://www.ojdevelops.com/2016/05/end-to-end-image-upload-with-azure.html

这是我UploadImage.Component.html

<form name="form" method="post" action="" enctype="multipart/form-data"> 
<div class="input-group"> 

    <input id="imagePath" class="form-control" type="file" (change)="fileChangeEvent($event)" name="Image" accept="image/*" /> 

    <span class="input-group-btn"> 

     <a class="btn btn-success" (click)='uploadImagetoStorageContainer()'>Upload</a> 

    </span> 
</div> 

这是我UploadImage.Component.ts

///////////////////////////////////////////////////////////////////////////////////// 
    // calling UploadingImageController using Http Post request along with Image file 
    ////////////////////////////////////////////////////////////////////////////////////// 
    uploadImagetoStorageContainer() { 
     this.makeFileRequest("/UploadImage/UploadImagetoBlob", [], this.filesToUpload).then((result) => { 
      console.log(result); 
     }, (error) => { 
      console.error(error); 
      }); 

    } 
    makeFileRequest(url: string, params: Array<string>, files: Array<File>) { 
     return new Promise((resolve, reject) => { 
      var formData: any = new FormData(); 
      var xhr = new XMLHttpRequest(); 
      for (var i = 0; i < files.length; i++) { 
       formData.append("uploads[]", files[i], files[i].name); 
      } 
      xhr.onreadystatechange = function() { 
       if (xhr.readyState == 4) { 
        if (xhr.status == 200) { 
         alert("successfully uploaded image into storgae blob"); 
         resolve(JSON.parse(xhr.response)); 

        } else { 
         reject(xhr.response); 
        } 
       } 
      } 
      xhr.open("POST", url, true); 
      xhr.send(formData); 
     }); 
    } 

    fileChangeEvent(fileInput: any) { 
     this.filesToUpload = <Array<File>>fileInput.target.files; 
    } 

这是我UploadImageController.ts

[HttpPost] 
    [Route("UploadImage/UploadImagetoBlob")] 
    public async Task<IHttpActionResult> UploadImagetoBlob()//string imagePath 
    { 
     try 
     { 
      //var iamge= imagePath as string; 
      //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 image = GetImageFromRequest(); 
      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 response; 
      return Ok(); 


     } 
     catch (Exception ex) 
     { 
      Debug.WriteLine(ex.Message); 
      return null; 
     } 

    } 

这个答案可能是谁正在寻找上传所选图像成角2应用程序中使用打字稿Azure存储Blob的功能有帮助。

问候，

普拉迪普