AngularJS向后端ASP.NET API控制器上传文件

public class FilesController : ApiController{  //using System.Web.Http  [HttpPost]  public async Task<HttpResponseMessage> Upload()  {    if(!Request.Content.IsMimeMultipartContent())    {      this.Request.CreateResponse(HttpStatusCode.UnsuportedMediaType);    }        var provider = GetMultipartProvider();    var result = await Request.Content.ReadAsMultipartAsync(provider);        //文件名类似"BodyPart_26d6abe1-3ae1-416a-9429-b35f15e6e5d5"这样的格式    var originalFileName = GetDeserializedFileName(result.FileData.First());        var uploadFileInfo = new FileInfo(result.FileData.First().LocalFileName);        //如果前端无表单数据，这里注销    var filleUploadObj = GetFormData<UploadDataModel>(result);        var returnData = "ReturnTest";    return this.Request.CreateResponse(HttpStatusCode.OK, new {returnData});  }    private MultipartFormDataStreamProvider GetMultipartProvider()  {    //图片的上传路径    var uploadFolder = "~/App_Data/FileUploads";        //获取根路径    var root = HttpContext.Current.Server.MapPath(uploadFolder);        //创建文件夹    Directory.CreateDirectory(root);    return new MultipartFormDataStreamProvider(root);  }    //从Provider中获取表单数据  private object GetFormData<T>(MultipartFormDataStreamProvider result)  {    if(result.FormData.HasKeys())    {      var unescapedFormData = Uri.UnescapeDataString(result.FormData.GetValues(0).FirstOrDefault() ?? String.Empty);            if(!String.IsNullOrEmpty(unescapedFormData))      {        return JsonConvert.DeserializeObject<T>(upescapedFormData);      }    }    return null;  }    //获取反序列化文件名  private string GetDeserializedFileName(MultipartFileData fileData)  {    var fileName = GetFileName(fileData);    return JsonConvert.DeserializedObject(fileName).ToString();  }    //获取文件名  public string GetFileName(MultipartFileData fileData)  {    return fileData.Headers.ContentDisposition.FileName;  }}

public class UploadDataModel{  public string testString1{get;set;}  public string testString2{get;set;}} 

<div ng-include="'upload.html'"></div>

<div ng-controller="UploadCtrl"  <input type="file" ng-file-select="onFileSelect($files)" multiple></div>

'use strict'angular.module('angularUploadApp',[  'ngCookies',  'ngResource',  'ngSanitize',  'ngRoute',  'angularFileUpload']).config(function($routeProvider){  $routeProvider    .when('/', {      templateUrl: 'upload.html',      controller: 'UploadCtrl'    })    .otherwise({      resirectTo: '/'    })})

'use strict';angular.module('angularUploadApp')  .controller('UploadCtrl', function($scope, $http, $timeout, $upload){    $scope.upload = [];    $scope.fileUploadObj = {testString1: "Test ring 1", testString2: "Test string 2"};        $scope.onFileSelect = function ($files) {      //$files: an array of files selected, each file has name, size, and type.      for (var i = 0; i < $files.length; i++) {        var $file = $files[i];        (function (index) {          $scope.upload[index] = $upload.upload({            url: "./api/files/upload", // webapi url            method: "POST",            data: { fileUploadObj: $scope.fileUploadObj },            file: $file          }).progress(function (evt) {            // get upload percentage            console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));          }).success(function (data, status, headers, config) {            // file is uploaded successfully            console.log(data);          }).error(function (data, status, headers, config) {            // file failed to upload            console.log(data);          });        })(i);      }    }    $scope.abortUpload = function (index) {      $scope.upload[index].abort();    }  })