如何将参数从角度 $upload 传递到 web api答案

【问题标题】：How to pass parameters from angular $upload to web api如何将参数从角度 $upload 传递到 web api
【发布时间】：2016-05-23 16:08:56
【问题描述】：

我在将参数从 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
}

完成此任务的干净/正确方法是什么？

【问题讨论】：

$upload 属于哪个库？

标签： c# angularjs asp.net-web-api upload

【解决方案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# 网络方法

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

    return Json("horray");
}

【讨论】：

这不是 OP 所要求的。我看不出这如何有助于使用 ng-file-upload 传递参数。

【解决方案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) {
});

希望对你有帮助！

【讨论】：