.Net Core实现图片文件上传下载功能

当下.net core项目可是如雨后春笋一般发展起来，作为.net大军中的一员，我热忱地拥抱了.net core并且积极使用其进行业务的开发，我们先介绍下.net core项目下实现文件上传下载接口。

一、开发环境

毋庸置疑，宇宙第一ide visualstudio 2017

二、项目结构

filescontroller 文件上传下载控制器

picturecontroller 图片上传下载控制器

return_helper_dg 返回值帮助类

三、关键代码

1、首先我们来看startup.cs 这个是我们的程序启动配置类，在这里我们进行一系列的配置。

跨域配置：

当然跨域少不了dll的引用，我们使用nuget引用相关的引用包

服务器资源路径置换，这样可以防止客户端猜测服务端文件路径，制造一个虚拟的隐射进行访问，提高了安全性。

startup.cs的完整代码如下：

using microsoft.aspnetcore.builder;
using microsoft.aspnetcore.hosting;
using microsoft.aspnetcore.http;
using microsoft.extensions.configuration;
using microsoft.extensions.dependencyinjection;
using microsoft.extensions.fileproviders;
using microsoft.extensions.logging;
using system.io;

namespace qx_core.filescenter
{
 public class startup
 {
 public startup(ihostingenvironment env)
 {
  var builder = new configurationbuilder()
  .setbasepath(env.contentrootpath)
  .addjsonfile("appsettings.json", optional: false, reloadonchange: true)
  .addjsonfile($"appsettings.{env.environmentname}.json", optional: true)
  .addenvironmentvariables();
  configuration = builder.build();
 }

 public iconfigurationroot configuration { get; }

 // this method gets called by the runtime. use this method to add services to the container.
 public void configureservices(iservicecollection services)
 {
  // add framework services.
  services.addmvc();
  #region cors
  services.addcors(options =>
  {
  options.addpolicy("allowspecificorigin",
   builder => builder.withorigins("http://localhost:3997").allowanyheader().allowanyorigin().allowanymethod());
  });
  #endregion
 }

 // this method gets called by the runtime. use this method to configure the http request pipeline.
 public void configure(iapplicationbuilder app, ihostingenvironment env, iloggerfactory loggerfactory)
 {
  //loggerfactory.addconsole(configuration.getsection("logging"));
  //loggerfactory.adddebug();

  app.usemvc();
  // shows usecors with named policy.
  app.usecors("allowspecificorigin");

  app.usestaticfiles(new staticfileoptions()
  {
  fileprovider = new physicalfileprovider(path.combine(directory.getcurrentdirectory(), @"wwwroot/files")),
  requestpath = new pathstring("/src")
  });
 }
 }
}

2、return_helper_dg类用户设置一个统一的返回值反馈到客户端
return_helper_dg类的代码如下：

using system.net;
/**
* author:qixiao
* create:2017-5-19 15:15:05
* */
namespace qx_core.filescenter.qx_core.helper
{
 public abstract class return_helper_dg
 {
 public static object issuccess_msg_data_httpcode(bool issuccess, string msg, dynamic data, httpstatuscode httpcode = httpstatuscode.ok)
 {
  return new { issuccess = issuccess, msg = msg, httpcode = httpcode, data = data };
 }
 public static object success_msg_data_dcount_httpcode(string msg, dynamic data = null, int datacount = 0, httpstatuscode httpcode = httpstatuscode.ok)
 {
  return new { issuccess = true, msg = msg, httpcode = httpcode, data = data, datacount = datacount };
 }
 public static object error_msg_ecode_elevel_httpcode(string msg, int errorcode = 0, int errorlevel = 0, httpstatuscode httpcode = httpstatuscode.internalservererror)
 {
  return new { issuccess = false, msg = msg, httpcode = httpcode, errorcode = errorcode, errorlevel = errorlevel };
 }
 }
}

3、filescontroller是我们的文件上传控制器接口，这里定义了对上传的文件的接收操作，并且在控制器上启用跨域配置

using microsoft.aspnetcore.cors;
using microsoft.aspnetcore.hosting;
using microsoft.aspnetcore.mvc;
using microsoft.net.http.headers;
using qx_core.filescenter.qx_core.helper;
using system;
using system.collections.generic;
using system.io;
using system.linq;

namespace qx_core.filescenter.controllers
{
 //[produces("application/json")]
 [route("api/[controller]")]
 [enablecors("allowspecificorigin")]
 public class filescontroller : controller
 {
 private ihostingenvironment hostingenv;

 public filescontroller(ihostingenvironment env)
 {
  this.hostingenv = env;
 }

 [httppost]
 public iactionresult post()
 {
  var files = request.form.files;
  long size = files.sum(f => f.length);

  //size > 100mb refuse upload !
  if (size > 104857600)
  {
  return json(return_helper_dg.error_msg_ecode_elevel_httpcode("files total size > 100mb , server refused !"));
  }

  list<string> filepathresultlist = new list<string>();

  foreach (var file in files)
  {
  var filename = contentdispositionheadervalue.parse(file.contentdisposition).filename.trim('"');

  string filepath = hostingenv.webrootpath + $@"\files\files\";

  if (!directory.exists(filepath))
  {
   directory.createdirectory(filepath);
  }

  filename = guid.newguid() + "." + filename.split('.')[1];

  string filefullname = filepath + filename;

  using (filestream fs = system.io.file.create(filefullname))
  {
   file.copyto(fs);
   fs.flush();
  }
  filepathresultlist.add($"/src/files/{filename}");
  }

  string message = $"{files.count} file(s) /{size} bytes uploaded successfully!";

  return json(return_helper_dg.success_msg_data_dcount_httpcode(message, filepathresultlist, filepathresultlist.count));
 }

 }
}

在上述的代码中，我们对上传的文件的大小进行了限制，并且对文件的大小进行反馈。

4、picturecontroller 图片上传控制器接口，类似于文件，不过对上传的图片类型进行了校验和限制

using microsoft.aspnetcore.cors;
using microsoft.aspnetcore.hosting;
using microsoft.aspnetcore.mvc;
using microsoft.net.http.headers;
using qx_core.filescenter.qx_core.helper;
using system;
using system.collections.generic;
using system.io;
using system.linq;

namespace qx_core.filescenter.controllers
{
 //[produces("application/json")]
 [route("api/[controller]")]
 [enablecors("allowspecificorigin")]
 public class picturescontroller : controller
 {
 private ihostingenvironment hostingenv;

 string[] pictureformatarray = { "png", "jpg", "jpeg", "bmp", "gif","ico", "png", "jpg", "jpeg", "bmp", "gif","ico" };

 public picturescontroller(ihostingenvironment env)
 {
  this.hostingenv = env;
 }

 [httppost]
 public iactionresult post()
 {
  var files = request.form.files;
  long size = files.sum(f => f.length);

  //size > 100mb refuse upload !
  if (size > 104857600)
  {
  return json(return_helper_dg.error_msg_ecode_elevel_httpcode("pictures total size > 100mb , server refused !"));
  }

  list<string> filepathresultlist = new list<string>();

  foreach (var file in files)
  {
  var filename = contentdispositionheadervalue.parse(file.contentdisposition).filename.trim('"');

  string filepath = hostingenv.webrootpath + $@"\files\pictures\";

  if (!directory.exists(filepath))
  {
   directory.createdirectory(filepath);
  }

  string suffix = filename.split('.')[1];

  if (!pictureformatarray.contains(suffix))
  {
   return json(return_helper_dg.error_msg_ecode_elevel_httpcode("the picture format not support ! you must upload files that suffix like 'png','jpg','jpeg','bmp','gif','ico'."));
  }

  filename = guid.newguid() + "." + suffix;

  string filefullname = filepath + filename;

  using (filestream fs = system.io.file.create(filefullname))
  {
   file.copyto(fs);
   fs.flush();
  }
  filepathresultlist.add($"/src/pictures/{filename}");
  }

  string message = $"{files.count} file(s) /{size} bytes uploaded successfully!";

  return json(return_helper_dg.success_msg_data_dcount_httpcode(message, filepathresultlist, filepathresultlist.count));
 }

 }
}

到此，我们的文件图片上传代码已经全部完成，下面我们对文件上传的客户端进行实现

四、客户端的实现 

客户端我们很简单地用jquery ajax的方式进行图片文件的提交，客户端代码的实现：

<!doctype>

<head>
 <script src="jquery-3.2.0.min.js"></script>
 <script>
 $(document).ready(function () {
  var appdomain = "http://localhost:53972/";
  $("#btn_fileupload").click(function () {
    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/pictures',
   contenttype: false,
   processdata: false,
   data: data,
   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 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>

五、代码测试

1.启动服务器

我们可以看到一个控制台和一个web自动启动，并且web显示默认的values控制器的请求返回值。

2.图片上传

我们使用ajax的方式进行图片的上传操作，打开测试web页面，并且选择图片，点击上传，查看控制台返回的结果：

可以看到，一张图片上传成功！

输入返回的地址，我们可以看到成功访问到了图片，特别注意这里服务器路径的改变：

多图片上传：

可见，多图片上传没有任何问题！

同样进行文件上传的测试：

同样，文件上传也没有任何问题！

六、总结

至此，我们已经实现了预期的.net core图片文件上传的全部功能！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。