Question

服务器端代码：

public class SomeModel
{
    public Int64 Id { get; set; }
    [Required]
    public Int64 From_UserId { get; set; }
    public string Text { get; set; }
    public List<HttpPostedFileBase> Files {get; set;} //<-- Wonder if this is right way ?
}

Action Method in Controller

[HttpPost]
[Route("Upload")]
public IHttpActionResult Upload( SomeModel model)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }
    //More code
    return Ok();
}

像这样的角度客户端代码会起作用吗？

$http.post("api/upload",{
    Id: 1,
    From_UserId: 1,
    Text: "First File",
    Files: [file1, file2, file3]    //<-These are the ones obtained through file type input 
 })

其他信息：使用Azure存储来存储上传的文件。

Answer 1

这是一个伟大的指令。 ng-file-upload

这是Demo using Asp.net WebApi。

<强> JS

//inject directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
    // upload later on form submit or something similar
    $scope.submit = function() {
      if ($scope.form.file.$valid && $scope.file) {
        $scope.upload($scope.file);
      }
    };

    // upload on file select or drop
    $scope.upload = function (file) {
        Upload.upload({
            url: 'upload/url',
            data: {file: file, 'username': $scope.username}
        }).then(function (resp) {
            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
        }, function (resp) {
            console.log('Error status: ' + resp.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });
    };
    // for multiple files:
    $scope.uploadFiles = function (files) {
      if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          Upload.upload({..., data: {file: files[i]}, ...})...;
        }
        // or send them all together for HTML5 browsers:
        Upload.upload({..., data: {file: files}, ...})...;
      }
    }
}]);

如何在WebApi模型中使用HttpPostedFileBase（Post Action）

1 个答案: