欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-03-30 20:00:15
当下.net core项目可是如雨后春笋一般发展起来,作为.net大军中的一员,我热忱地拥抱了.net core并且积极使用其进行业务的开发,我们先介绍下.net core...

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

一、开发环境

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

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

二、项目结构

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

filescontroller 文件上传下载控制器

picturecontroller 图片上传下载控制器

return_helper_dg 返回值帮助类

三、关键代码

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

跨域配置:

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

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

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

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

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

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

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.启动服务器

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

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

2.图片上传

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

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

可以看到,一张图片上传成功!

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

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

多图片上传:

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

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

可见,多图片上传没有任何问题!

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

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

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

同样,文件上传也没有任何问题!

六、总结

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

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