AngularJS向后端ASP.NET API控制器上传文件
本文实例介绍了前端AngularJS向后端ASP.NETWebAPI上传文件的实现方法，具体内容如下
首先服务端：
publicclassFilesController:ApiController
{
//usingSystem.Web.Http
[HttpPost]
publicasyncTask<HttpResponseMessage>Upload()
{
if(!Request.Content.IsMimeMultipartContent())
{
this.Request.CreateResponse(HttpStatusCode.UnsuportedMediaType);
}
varprovider=GetMultipartProvider();
varresult=awaitRequest.Content.ReadAsMultipartAsync(provider);
//文件名类似"BodyPart_26d6abe1-3ae1-416a-9429-b35f15e6e5d5"这样的格式
varoriginalFileName=GetDeserializedFileName(result.FileData.First());
varuploadFileInfo=newFileInfo(result.FileData.First().LocalFileName);
//如果前端无表单数据，这里注销
varfilleUploadObj=GetFormData<UploadDataModel>(result);
varreturnData="ReturnTest";
returnthis.Request.CreateResponse(HttpStatusCode.OK,new{returnData});
}
privateMultipartFormDataStreamProviderGetMultipartProvider()
{
//图片的上传路径
varuploadFolder="~/App_Data/FileUploads";
//获取根路径
varroot=HttpContext.Current.Server.MapPath(uploadFolder);
//创建文件夹
Directory.CreateDirectory(root);
returnnewMultipartFormDataStreamProvider(root);
}
//从Provider中获取表单数据
privateobjectGetFormData<T>(MultipartFormDataStreamProviderresult)
{
if(result.FormData.HasKeys())
{
varunescapedFormData=Uri.UnescapeDataString(result.FormData.GetValues(0).FirstOrDefault()??String.Empty);
if(!String.IsNullOrEmpty(unescapedFormData))
{
returnJsonConvert.DeserializeObject<T>(upescapedFormData);
}
}
returnnull;
}
//获取反序列化文件名
privatestringGetDeserializedFileName(MultipartFileDatafileData)
{
varfileName=GetFileName(fileData);
returnJsonConvert.DeserializedObject(fileName).ToString();
}
//获取文件名
publicstringGetFileName(MultipartFileDatafileData)
{
returnfileData.Headers.ContentDisposition.FileName;
}
}
UploadDataModel.cs
publicclassUploadDataModel
{
publicstringtestString1{get;set;}
publicstringtestString2{get;set;}
}
客户端主页面：
index.html
<divng-include="'upload.html'"></div>
引用：
- angular-file-upload-shim.js
- angular.js
- angular-file-upload.js
- angular-cookies.js
- angular-resource.js
- angular-sanitize.js
- angular-route.js
- app.js
- upload.js
upload.html部分视图页用来接受文件。
upload.html
<divng-controller="UploadCtrl" <inputtype="file"ng-file-select="onFileSelect($files)"multiple> </div>
app.js模块依赖和全局配置。
app.js
'usestrict'
angular.module('angularUploadApp',[
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'angularFileUpload'
])
.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'upload.html',
controller:'UploadCtrl'
})
.otherwise({
resirectTo:'/'
})
})
控制器提供上传和取消上传的方法。
upload.js
'usestrict';
angular.module('angularUploadApp')
.controller('UploadCtrl',function($scope,$http,$timeout,$upload){
$scope.upload=[];
$scope.fileUploadObj={testString1:"Testring1",testString2:"Teststring2"};
$scope.onFileSelect=function($files){
//$files:anarrayoffilesselected,eachfilehasname,size,andtype.
for(vari=0;i<$files.length;i++){
var$file=$files[i];
(function(index){
$scope.upload[index]=$upload.upload({
url:"./api/files/upload",//webapiurl
method:"POST",
data:{fileUploadObj:$scope.fileUploadObj},
file:$file
}).progress(function(evt){
//getuploadpercentage
console.log('percent:'+parseInt(100.0*evt.loaded/evt.total));
}).success(function(data,status,headers,config){
//fileisuploadedsuccessfully
console.log(data);
}).error(function(data,status,headers,config){
//filefailedtoupload
console.log(data);
});
})(i);
}
}
$scope.abortUpload=function(index){
$scope.upload[index].abort();
}
})
以上就是前端AngularJS向后端ASP.NETWebAPI上传文件的实现方法，希望对大家的学习有所帮助。