时间:2021-07-01 10:21:17 帮助过:15人阅读
首先服务端:
public class FilesController : ApiController { //using System.Web.Http [HttpPost] public async TaskUpload() { 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 (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 (MultipartFormDataStreamProvider result) { if(result.FormData.HasKeys()) { var unescapedFormData = Uri.UnescapeDataString(result.FormData.GetValues(0).FirstOrDefault() ?? String.Empty); if(!String.IsNullOrEmpty(unescapedFormData)) { return JsonConvert.DeserializeObject (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
public class UploadDataModel { public string testString1{get;set;} public string testString2{get;set;} }
客户端主页面:
index.html
引用:
upload.html部分视图页用来接受文件。
upload.html
app.js模块依赖和全局配置。
app.js
控制器提供上传和取消上传的方法。
upload.js
以上就是前端AngularJS向后端ASP.NET Web API上传文件的实现方法,希望对大家的学习有所帮助。