預期結束MIME多部分流。 MIME多部分郵件不完整

Question

我有一個Angular應用程序，用Typescript編寫，帶有一個ASP.Net Web Api後端。我正嘗試使用ng-file-upload（請參閱此link以獲取詳細信息）指令來上傳圖像文件。

我在網頁API Post方法收到異常：

「 MIME多流意外結束MIME多信息是不完整的。」

我已經完成了我的研究並發現了類似的問題here - 我試圖實施Landuber Kassa的答案，但沒有成功。

也this雖然我的項目是不是MVC，並在任何情況下它不起作用。

我很新鮮的想法，並會欣賞社區的想法。如果我能指出正確的方向，我很樂意考慮其他選擇。

灰

我的.Net Post方法（實施Landuber卡薩的想法）：

[RoutePrefix("BeaufortAppStore/api/Image")] 
public class ImageController : ApiController 
{ 

    #region Methods 

    #region Posts 

    [Route("UploadImage")] 
    [HttpPost] 
    public async Task<IHttpActionResult> UploadImage() 
    { 
     if (!Request.Content.IsMimeMultipartContent()) 
     { 
      throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); 
     } 

     var provider = new MultipartMemoryStreamProvider(); 

     Stream reqStream = Request.Content.ReadAsStreamAsync().Result; 
     MemoryStream tempStream = new MemoryStream(); 
     reqStream.CopyTo(tempStream); 

     tempStream.Seek(0, SeekOrigin.End); 
     StreamWriter writer = new StreamWriter(tempStream); 
     writer.WriteLine(); 
     writer.Flush(); 
     tempStream.Position = 0; 

     StreamContent streamContent = new StreamContent(tempStream); 
     foreach (var header in Request.Content.Headers) 
     { 
      streamContent.Headers.Add(header.Key, header.Value); 
     } 

     // Read the form data and return an async task. 
     await streamContent.ReadAsMultipartAsync(provider); // FAILS AT THIS POINT 
     foreach (var file in provider.Contents) 
     { 
      var filename = file.Headers.ContentDisposition.FileName.Trim('\"'); 
      var buffer = await file.ReadAsByteArrayAsync(); 
      //Do whatever you want with filename and its binary data. 
     } 
     return Ok(); 
    } 

    #endregion 

    #endregion 

我的角度控制器的方法：

public upload(): void { 
     //Create config used in ng-file-upload 
     var config: IFileUploadConfigFile = { 
      data: this.file, url: "BeaufortAppStore/api/Image/UploadImage/", method: "POST" }; 
     this._dataService.uploadImage(config).then((result: any) => { 
      this.thumbnail = result.data; 
     }); 
    } 

我的角視圖（爲一個指令局部視圖） ：

<div class="form-group"> 
<label for="file" class="control-label col-xs-2">Choose a file</label> 
<input id="file" type="file" name="file" class="form-control" ngf-select ngf-pattern="'image/*'" 
     ng-model="vm.file" /> 
<img style="width:100px;" ngf-thumbnail="thumbnail || '/thumb.jpg'" /> 
<button type="submit" ng-click="vm.upload()">Upload</button> 

Answer 1

試試這個在C＃：

[HttpPost] 
    [Route("Profile/Image")] 
    public Task<HttpResponseMessage> UploadImgProfile() 
      { 
       try 
       { 
        if (!ModelState.IsValid) return null; 

        var currentUser = _userUtils.GetCurrentUser(User); 
        if (currentUser == null) return null; 

        HttpRequestMessage request = this.Request; 
        if (!request.Content.IsMimeMultipartContent()) 
         throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.UnsupportedMediaType)); 

        string root = HttpContext.Current.Server.MapPath("~" + Constant.Application.User_Image_Directory); 

        bool exists = Directory.Exists(root); 
        if (!exists) 
         Directory.CreateDirectory(root); 

        var provider = new MultipartFormDataStreamProvider(root); 





    var task = request.Content.ReadAsMultipartAsync(provider). 
        ContinueWith<HttpResponseMessage>(o => 
        { 
         var finfo = new  FileInfo(provider.FileData.First().LocalFileName); 

      string guid = Guid.NewGuid().ToString(); 

      var fileName = guid + "_" + currentUser.IdOwin + ".jpg"; 

         File.Move(finfo.FullName, Path.Combine(root, fileName)); 

         return new HttpResponseMessage() 
         { 
          Content = new StringContent(Path.Combine(Constant.Application.User_Image_Directory, fileName)) 
         }; 
         } 
         ); 
        return task; 
       } 
       catch (Exception ex) 
       { 
        _logger.LogException(ex); 
        return null; 
       } 
      } 

角控制器：

//Upload Func 
      $scope.upload = function (files) { 
       if (files && files.length) { 
        for (var i = 0; i < files.length; i++) { 
         var file = files[i]; 
         $scope.uploading = true; 
         // $scope.imageName = file.name; 
         $upload.upload({ 
          url: enviroment.apiUrl + '/api/CurrentUser/Profile/Image', 
          //fields: { 'username': $scope.username }, 
          file: file 
         }).progress(function (evt) { 
          $scope.uploading = true; 
          var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
          console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name); 
          $scope.progress = progressPercentage; 
         }).success(function (data, status, headers, config) { 
          console.log('file ' + config.file.name + 'uploaded. Response: ' + data); 
          $scope.imageName = data; 
          $scope.uploading = false; 
          $scope.loadSuccess = true; 
          vm.uploadImage = false; 
          //AR 
          var reader = new FileReader(); 
          reader.onload = function (evt) { 
           $scope.$apply(function ($scope) { 
            $scope.myImage = evt.currentTarget.result; 
           }); 
          }; 
          reader.readAsDataURL(files[0]); 
          //END AR 
         }); 
        } 
       } 
      }; 


    // Stay on Listen upload file 
    $scope.$watch('files', function (evt) { 
     $scope.upload($scope.files); 
    }); 

HTML：

<div class="row"> 
           <!--UPLOAD--> 
           <div class="up-buttons"> 

            <div class="clearfix visible-xs-block"></div> 
            <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-center box-upload-image" data-ng-show="profileCtrl.uploadImage"> 
             <br /> 
             <div id="imgDragDrop" ng-file-drop ng-model="files" 
              drag-over-class="dragover" 
              accept="image/*"> 

              <div class="cropArea-bkg"> 
               <h4> 
                <span class="mdi mdi-account mdi-48px"></span> 
                <br /><br /> 
                Carica immagine profilo 
               </h4> 

               <p>Trascina qui la tua immagine, oppure</p> 

               <div ng-file-select="" ng-model="files" class="btn btn-secondary" ng-accept="'*.pdf,*.jpg,*.png'" tabindex="0"> 
                Sfoglia sul tuo computer 
               </div><br> 
              </div> 
             </div> 
             <div ng-no-file-drop class="well bg-danger">File Drag/Drop non è supportato da questo browser</div> 
             <br /> 
             <div class="text-center"> 
              <div class="progress" ng-show="uploading"> 
               <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="{{ ::progress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{::progress}}% "> 
                <span class="sr-only">{{ ::progress }}% Complete</span> 
               </div> 
              </div> 
             </div> 

            </div> 

            <!--END UPLOAD--> 

           </div> 
          </div>