当前位置:Gxlcms > JavaScript > AngularJS向后端ASP.NETAPI控制器上传文件_AngularJS

AngularJS向后端ASP.NETAPI控制器上传文件_AngularJS

时间:2021-07-01 10:21:17 帮助过:15人阅读

本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件的实现方法,具体内容如下

首先服务端:

public class FilesController : ApiController
{
  //using System.Web.Http
  [HttpPost]
  public async Task 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(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

引用:

  • 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

app.js模块依赖和全局配置。

app.js

控制器提供上传和取消上传的方法。

upload.js

以上就是前端AngularJS向后端ASP.NET Web API上传文件的实现方法,希望对大家的学习有所帮助。

人气教程排行