本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件的实现方法,具体内容如下
首先服务端:
var provider = GetMultipartProvider();
var result = await Request.Content.ReadAsMultipartAsync(provider);
//<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名类似"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";
//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>根路径
var root = HttpContext.Current.Server.MapPath(uploadFolder);
//创建<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>夹
Directory.CreateDirectory(root);
return new MultipartFormDataStreamProvider(root);
}
//从Provider中获取表单数据
private object GetFormData
{
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;
}
}
UploadDataModel.cs
客户端主页面:
index.html
引用:
- 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