如何從角$上傳參數傳遞給網頁API

Question

我在路過從我的UI參數我上傳邏輯麻煩

我設置了這樣

$upload.upload({ 
     url: "./api/import/ImportRecords", 
     method: "POST", 
     data: { fileUploadObj: $scope.fileUploadObj }, 
     fields: { 'clientId': $scope.NewImport.clientId }, 
     file: $scope.$file 
    }).progress(function (evt) { 
    }).success(function (data, status, headers, config) { 
    }).error(function (data, status, headers, config) { 
}); 

上傳請求我API設置如下：

[HttpPost] 
public IHttpActionResult ImportRecords() 
{ 
    var file = HttpContext.Current.Request.Files[0]; 

    // Need to read parameter here 
} 

什麼是乾淨/正確的方式來實現這一目標？

Answer 1

必須使用$upload？使用$http上傳文件非常簡單，無需單獨的插件。

廠

app.factory('apiService', ['$http', function($http){ 
    return { 
     uploadFile: function(url, payload) { 
      return $http({ 
       url: url, 
       method: 'POST', 
       data: payload, 
       headers: { 'Content-Type': undefined }, 
       transformRequest: angular.identity 
      }); 
     } 
    }; 
}]); 

控制器

//get the fileinput object 
var fileInput = document.getElementById("fileInput"); 
fileInput.click(); 

//do nothing if there's no files 
if (fileInput.files.length === 0) return; 

//there is a file present 
var file = fileInput.files[0]; 

var payload = new FormData(); 
payload.append("clientId", $scope.NewImport.clientId); 
payload.append("file", file); 

apiService.uploadFile('path/to/ImportRecords', payload).then(function(response){ 
    //file upload success 
}).catch(function(response){ 
    //there's been an error 
}); 

C＃WEBMETHOD

[HttpPost] 
public JsonResult ImportRecords(int clientId, HttpPostedFileBase file) 
{ 
    string fileName = file.FileName; 
    string extension = Path.GetExtension(fileName); 
    //etcc.... 

    return Json("horray"); 
} 

Answer 2

假設你是使用ng-file-upload。這應該工作

[Route("ImportRecords")]     
    [HttpPost] 
    public async Task<HttpResponseMessage> ImportRecords() 
    { 
     if (!Request.Content.IsMimeMultipartContent()) 
     { 
      this.Request.CreateResponse(HttpStatusCode.UnsupportedMediaType); 
     } 

     string tempFilesPath = "some temp path for the stream" 
     var streamProvider = new MultipartFormDataStreamProvider(tempFilesPath); 
     var content = new StreamContent(HttpContext.Current.Request.GetBufferlessInputStream(true)); 
     foreach (var header in Request.Content.Headers) 
     { 
      content.Headers.TryAddWithoutValidation(header.Key, header.Value); 
     } 
     var data = await content.ReadAsMultipartAsync(streamProvider); 

     //this is where you get your parameters 
     string clientId = data.FormData["clientId"];      
     ... 
    } 

這就是你應該如何調用$ upload.upload

$upload.upload({ 
     url: "./api/import/ImportRecords", 
     method: "POST", 
     data: { fileUploadObj: $scope.fileUploadObj, 
       clientId: $scope.NewImport.clientId, 
       file: $scope.$file 
     } 
      }).progress(function (evt) { 
    }).success(function (data, status, headers, config) { 
    }).error(function (data, status, headers, config) { 
}); 

希望它能幫助！