WebApi2 文件图片上传与xz功能详解

2017-06-03 05:41:41 /故事大全

Asp.Net Framework webapi2 文件上传与下载前端界面采用Ajax的方式执行

一、项目结构

1.App_Start配置了跨域访问，以免请求时候因跨域问题不能提交。具体的跨域配置方式如下，了解的朋友请自行略过。

跨域配置：NewGet安装dll Microsofg.AspNet.Cors

然后在App_Start 文件夹下的WebApiConfig.cs中写入跨域配置代码。

public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API configuration and services // Web API routes config.MapHttpAttributeRoutes(); // Web API configuration and services //跨域配置 //need reference from nuget config.EnableCors(new EnableCorsAttribute("*", "*", "*")); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); //if config the global filter input there need not write the attributes //config.Filters.Add(new App.WebApi.Filters.ExceptionAttribute_DG()); } }

跨域就算完成了，请自行测试。

2.新建两个控制器，一个PicturesController.cs，一个FilesController.cs当然图片也是文件，这里图片和文件以不同的方式处理的，因为图片的方式文件上传没有成功，所以另寻他路，如果在座的有更好的方式，请不吝赐教！

二、项目代码

1.我们先说图片上传、下载控制器接口，这里其实没什么好说的，就一个Get获取文件，参数是文件全名；Post上传文件；直接上代码。

using QX_Frame.App.WebApi; using QX_Frame.FilesCenter.Helper; using QX_Frame.Helper_DG; using QX_Frame.Helper_DG.Extends; using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using System.Linq; using System.Net; using System.Net.Http; using System.Net.Http.Headers; using System.Text; using System.Threading.Tasks; using System.Web.Http; /** * author:qixiao * create:2017-5-26 16:54:46 * */ namespace QX_Frame.FilesCenter.Controllers { public class PicturesController : WebApiControllerBase { //Get : api/Pictures public HttpResponseMessage Get(string fileName) { HttpResponseMessage result = null; DirectoryInfo directoryInfo = new DirectoryInfo(IO_Helper_DG.RootPath_MVC + @"Files/Pictures"); FileInfo foundFileInfo = directoryInfo.GetFiles().Where(x => x.Name == fileName).FirstOrDefault(); if (foundFileInfo != null) { FileStream fs = new FileStream(foundFileInfo.FullName, FileMode.Open); result = new HttpResponseMessage(HttpStatusCode.OK); result.Content = new StreamContent(fs); result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream"); result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment"); result.Content.Headers.ContentDisposition.FileName = foundFileInfo.Name; } else { result = new HttpResponseMessage(HttpStatusCode.NotFound); } return result; } //POST : api/Pictures public async Task<IHttpActionResult> Post() { if (!Request.Content.IsMimeMultipartContent()) { throw new Exception_DG("unsupported media type", 2005); } string root = IO_Helper_DG.RootPath_MVC; IO_Helper_DG.CreateDirectoryIfNotExist(root + "/temp"); var provider = new MultipartFormDataStreamProvider(root + "/temp"); // Read the form data. await Request.Content.ReadAsMultipartAsync(provider); List<string> fileNameList = new List<string>(); StringBuilder sb = new StringBuilder(); long fileTotalSize = 0; int fileIndex = 1; // This illustrates how to get the file names. foreach (MultipartFileData file in provider.FileData) { //new folder string newRoot = root + @"Files/Pictures"; IO_Helper_DG.CreateDirectoryIfNotExist(newRoot); if (File.Exists(file.LocalFileName)) { //new fileName string fileName = file.Headers.ContentDisposition.FileName.Substring(1, file.Headers.ContentDisposition.FileName.Length - 2); string newFileName = Guid.NewGuid() + "." + fileName.Split(".")[1]; string newFullFileName = newRoot + "/" + newFileName; fileNameList.Add($"Files/Pictures/{newFileName}"); FileInfo fileInfo = new FileInfo(file.LocalFileName); fileTotalSize += fileInfo.Length; sb.Append($" #{fileIndex} Uploaded file: {newFileName} ({ fileInfo.Length} bytes)"); fileIndex++; File.Move(file.LocalFileName, newFullFileName); Trace.WriteLine("1 file copied , filePath=" + newFullFileName); } } return Json(Return_Helper.Success_Msg_Data_DCount_HttpCode($"{fileNameList.Count} file(s) /{fileTotalSize} bytes uploaded successfully! Details -> {sb.ToString()}", fileNameList, fileNameList.Count)); } } }

里面可能有部分代码在Helper帮助类里面写的，其实也仅仅是获取服务器根路径和如果判断文件夹不存在则创建目录，这两个代码的实现如下：

public static string RootPath_MVC { get { return System.Web.HttpContext.Current.Server.MapPath("~"); } } //create Directory public static bool CreateDirectoryIfNotExist(string filePath) { if (!Directory.Exists(filePath)) { Directory.CreateDirectory(filePath); } return true; }

2.文件上传下载接口和图片大同小异。

using QX_Frame.App.WebApi; using QX_Frame.FilesCenter.Helper; using QX_Frame.Helper_DG; using System.Collections.Generic; using System.Diagnostics; using System.IO; using System.Linq; using System.Net; using System.Net.Http; using System.Net.Http.Headers; using System.Text; using System.Threading.Tasks; using System.Web; using System.Web.Http; /** * author:qixiao * create:2017-5-26 16:54:46 * */ namespace QX_Frame.FilesCenter.Controllers { public class FilesController : WebApiControllerBase { //Get : api/Files public HttpResponseMessage Get(string fileName) { HttpResponseMessage result = null; DirectoryInfo directoryInfo = new DirectoryInfo(IO_Helper_DG.RootPath_MVC + @"Files/Files"); FileInfo foundFileInfo = directoryInfo.GetFiles().Where(x => x.Name == fileName).FirstOrDefault(); if (foundFileInfo != null) { FileStream fs = new FileStream(foundFileInfo.FullName, FileMode.Open); result = new HttpResponseMessage(HttpStatusCode.OK); result.Content = new StreamContent(fs); result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream"); result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment"); result.Content.Headers.ContentDisposition.FileName = foundFileInfo.Name; } else { result = new HttpResponseMessage(HttpStatusCode.NotFound); } return result; } //POST : api/Files public async Task<IHttpActionResult> Post() { //get server root physical path string root = IO_Helper_DG.RootPath_MVC; //new folder string newRoot = root + @"Files/Files/"; //check path is exist if not create it IO_Helper_DG.CreateDirectoryIfNotExist(newRoot); List<string> fileNameList = new List<string>(); StringBuilder sb = new StringBuilder(); long fileTotalSize = 0; int fileIndex = 1; //get files from request HttpFileCollection files = HttpContext.Current.Request.Files; await Task.Run(() => { foreach (var f in files.AllKeys) { HttpPostedFile file = files[f]; if (!string.IsNullOrEmpty(file.FileName)) { string fileLocalFullName = newRoot + file.FileName; file.SaveAs(fileLocalFullName); fileNameList.Add($"Files/Files/{file.FileName}"); FileInfo fileInfo = new FileInfo(fileLocalFullName); fileTotalSize += fileInfo.Length; sb.Append($" #{fileIndex} Uploaded file: {file.FileName} ({ fileInfo.Length} bytes)"); fileIndex++; Trace.WriteLine("1 file copied , filePath=" + fileLocalFullName); } } }); return Json(Return_Helper.Success_Msg_Data_DCount_HttpCode($"{fileNameList.Count} file(s) /{fileTotalSize} bytes uploaded successfully! Details -> {sb.ToString()}", fileNameList, fileNameList.Count)); } } }

实现了上述两个控制器代码以后，我们需要前端代码来调试对接，代码如下所示。

<!doctype> <head> <script src="jquery-3.2.0.min.js"></script>   <script> $(document).ready(function () { var appDomain = "http://localhost:3997/"; $("#btn_fileUpload").click(function () { /** * 用ajax方式上传文件 ----------- * */ //-------asp.net webapi fileUpload // var formData = new FormData($("#uploadForm")[0]); $.ajax({ url: appDomain + "api/Files", type: "POST", data: formData, async: false, cache: false, contentType: false, processData: false, success: function (data) { console.log(JSON.stringify(data)); }, error: function (data) { console.log(JSON.stringify(data)); } }); //----end asp.net webapi fileUpload //----.net core webapi fileUpload // var fileUpload = $("#files").get(0); // var files = fileUpload.files; // var data = new FormData(); // for (var i = 0; i < files.length; i++) { //data.append(files[i].name, files[i]); // } // $.ajax({ // type: "POST", // url: appDomain+"api/Files", // contentType: false, // processData: false, // data: data, // success: function (data) { // console.log(JSON.stringify(data)); // }, // error: function () { // console.log(JSON.stringify(data)); // } // }); //--------end net core webapi fileUpload /** * ajaxfileupload.js 方式上传文件 * */ // $.ajaxFileUpload({ // type: "post", // url: appDomain + "api/Files", // secureuri: false, // fileElementId: "files", // success: function (data) { // console.log(JSON.stringify(data)); // }, // error: function () { // console.log(JSON.stringify(data)); // } // }); }); //end click }) </script> </head> <title></title> <body> <article> <header> <h2>article-form</h2> </header> <p> <form action="/" method="post" id="uploadForm" enctype="multipart/form-data"> <input type="file" id="files" name="files" placeholder="file" multiple>file-multiple属性可以选择多项<br><br> <input type="button" id="btn_fileUpload" value="fileUpload"> </form> </p> </article> </body>

至此，我们的功能已全部实现，下面我们来测试一下：