圖像上傳與一些數據使用angularjs和asp.netnet mvc web api

我已經嘗試了很多教程，但沒有發現什麼成果豐碩！我想發送一些數據與圖像到asp Web API。我現在得到的是：http://www.encodedna.com/angularjs/tutorial/angularjs-file-upload-using-http-post-formdata-webapi.htm 我現在可以使用該教程保存圖像，但是當我嘗試發送一些值與該圖像時，它返回'內部服務器錯誤';圖像上傳與一些數據使用angularjs和asp.netnet mvc web api

我的網頁API：

[HttpPost] 
    [Route("api/PictureAttApi/savepic")] 
    public string savepic() 
    { 



     int iUploadedCnt = 0; 

     // DEFINE THE PATH WHERE WE WANT TO SAVE THE FILES. 
     string sPath = ""; 
     sPath = System.Web.Hosting.HostingEnvironment.MapPath("~/images/"); 

     System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files; 

     // CHECK THE FILE COUNT. 
     for (int iCnt = 0; iCnt <= hfc.Count - 1; iCnt++) 
     { 
      System.Web.HttpPostedFile hpf = hfc[iCnt]; 

      if (hpf.ContentLength > 0) 
      { 
       // CHECK IF THE SELECTED FILE(S) ALREADY EXISTS IN FOLDER. (AVOID DUPLICATE) 
       if (!File.Exists(sPath + Path.GetFileName(hpf.FileName))) 
       { 
        // SAVE THE FILES IN THE FOLDER. 
        hpf.SaveAs(sPath + Path.GetFileName(hpf.FileName)); 
        iUploadedCnt = iUploadedCnt + 1; 
       } 
      } 
     } 

     // RETURN A MESSAGE. 
     if (iUploadedCnt > 0) 
     { 
      return iUploadedCnt + " Files Uploaded Successfully"; 
     } 
     else 
     { 
      return "Upload Failed"; 
     } 
    }

我的JS：

$scope.addimagefunc=function(){ 

// var data = new FormData($('form')[0]); 

    var data = new FormData(); 
    data.append('picture', $scope.picture); 
    data.append('FatherName', '5555'); 

     $.ajax({ 
      type: "POST", 
      url: dataUrl + 'PictureAttApi/savepic', // CALL WEB API TO SAVE THE FILES. 
      enctype: 'multipart/form-data', 
      contentType: false, 
      processData: false,   // PREVENT AUTOMATIC DATA PROCESSING. 
      cache: false, 
      data: data,     // DATA OR FILES IN THIS CONTEXT. 
      success: function (data, textStatus, xhr) { 
       $('#output').text(data); 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert(textStatus + ': ' + errorThrown); 
      } 
     });

}

我的指令：

.directive('fileModel', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 

      element.bind('change', function() { 
       scope.$apply(function() { 
        modelSetter(scope, element[0].files[0]); 
       }); 
      }); 
     } 
    }; 
}])

我的HTML：

<form action=""> 
    <div class="col-md-6"> 
     <label for="EmpPicture" class="">Upload Image:</label> 
     <input type="file" id="inputDeImg" ng-model="EmpPictureAdd" name="EmpPicture" file-model="picture" accept="image/*" /> 

    </div> 
    <div class="col-md-6"> 
     <img class="img-rounded" src="#" id="dImg" /> 
    </div> 

    <input class="btn btn-info" ng-click="addimagefunc()" value="add" /> 

    <p id="output"></p> 
</form>

但當我補充一點：

[HttpPost] 
    [Route("api/PictureAttApi/savepic")] 
    public string savepic(Member m) 
     { 

}

返回內部錯誤：我的追求是不帶任何參數（HTTPPostrdFileBase）如何在保存圖像？我如何傳遞一些數據（如$ scope.FatherName）與圖像在apiController？

來源

2017-07-15 Fawel

你準確告訴我什麼錯誤？ – coderwill

內部服務器錯誤！試着瞭解，我需要通過控制器功能 – Fawel

對於簡單的數據，你可能會發現，最容易在URI

傳遞下去呢？所以在JavaScript端，在$阿賈克斯更改URL這個

url: dataUrl + 'PictureAttApi/savepic?FatherName=55555'

和服務器端：

public string savepic([FromUri]string FatherName){

來源

2017-07-15 19:36:36

中的參數傳遞數據感謝您的答覆。但我怎麼能發送多個值與圖像？它現在與圖像一起工作。但我必須發送像'FatherName''MotherName'，'BirthDate'，'JoinDate'等值 – Fawel

在共享的鏈接中使用示例，可以將更多值附加到「formdata」。例如，

控制器

$scope.getTheFiles = function ($files) { 
angular.forEach($files, function (value, key) { 
    formdata.append(key, value);     // IMAGES 
    formdata.append('fatherName', 'somevalue'); // SOME OTHER DATA 
});

};

的Web API

閱讀使用Web API的價值，

System.Web.HttpContext.Current.Request.Form;

這樣你就可以同時上傳多個文件，並通過一些價值與它一起。

來源

2017-07-26 06:40:26

圖像上傳與一些數據使用angularjs和asp.netnet mvc web api

回答

相關問題