一. 接口设计
1. 说明
设计异步方法，这里采用文件流的形式进行存储,设计两个接口,分别用来处理单文件上传和多文件上传.
2. 大致思路
获取文件→判空→获取文件名和扩展名→设置存放绝对路径(若不存在,则新建)→编辑文件保存名称(这里随机命名,所以不用判重) →拼接最终路径进行保存→DB中存储相对路径→返回前端成功和相对路径.
3. 其它
可以通过 .Length，来获取文件的大小
代码分享：
#region 01-单文件上传 /// <summary> /// 单文件上传 /// </summary> /// <param name="_hostingEnvironment"></param> /// <returns></returns> public async Task<IActionResult> SingleSaveFile([FromServices] IWebHostEnvironment _hostingEnvironment) { try { long size = 0; //统计上传文件的大小(单位b) var files = Request.Form.Files; //获取文件 if (files.Count == 0) { return Json(new { status = "error", msg = "上传内容为空", data = "" }); } //获取文件扩展名 var fileName = files[0].FileName; int idxStart = fileName.LastIndexOf("."); string areviation = fileName.Substring(idxStart, fileName.Length - idxStart); //编辑文件的存储路径 var filePath = _hostingEnvironment.ContentRootPath + @"DownLoadPicture"; if (!Directory.Exists(filePath)) { Directory.CreateDirectory(filePath); } //编辑文件的名称(目前是随机命名,如果用原名保存,需要判重) var myFileName = $"{Guid.NewGuid().ToString()}{areviation}"; //最终路径 var finalPath = filePath + myFileName; size += files[0].Length; using (FileStream fs = System.IO.File.Create(finalPath)) { await files[0].CopyToAsync(fs); await fs.FlushAsync(); } //DB中存储的或者返回给前端的都是相对路径 string relativeUrl = $"/DownLoad/Picture/{myFileName}"; return Json(new { status = "ok", msg = "上传成功", data = relativeUrl }); } catch (Exception ex) { return Json(new { status = "error", msg = "上传失败", data = "" }); }; } #endregion #region 02-多文件上传 /// <summary> /// 多文件上传 /// </summary> /// <param name="_hostingEnvironment"></param> /// <returns></returns> public async Task<IActionResult> ManySaveFile([FromServices] IWebHostEnvironment _hostingEnvironment) { try { long size = 0; //统计上传文件的大小(单位b) var files = Request.Form.Files; //获取文件 if (files.Count == 0) { return Json(new { status = "error", msg = "上传内容为空", data = "" }); } List<string> rUrlList = new List<string>(); //多文件遍历上传 foreach (var file in files) { //获取文件扩展名 var fileName = file.FileName; int idxStart = fileName.LastIndexOf("."); string areviation = fileName.Substring(idxStart, fileName.Length - idxStart); //编辑文件的存储路径 var filePath = _hostingEnvironment.ContentRootPath + @"DownLoadPicture"; if (!Directory.Exists(filePath)) { Directory.CreateDirectory(filePath); } //编辑文件的名称(目前是随机命名,如果用原名保存,需要判重) var myFileName = $"{Guid.NewGuid().ToString()}{areviation}"; //最终路径 var finalPath = filePath + myFileName; size += file.Length; using (FileStream fs = System.IO.File.Create(finalPath)) { await file.CopyToAsync(fs); await fs.FlushAsync(); } //DB中存储的或者返回给前端的都是相对路径 string relativeUrl = $"/DownLoad/Picture/{myFileName}"; rUrlList.Add(relativeUrl); } return Json(new { status = "ok", msg = "上传成功", data = rUrlList }); } catch (Exception ex) { return Json(new { status = "error", msg = "上传失败", data = "" }); }; } #endregion
二. 基于LayUI文件上传
1.相关地址
官方文档：https://www.layui.com/doc/modules/upload.html
官方样例：https://www.layui.com/demo/upload.html
2. 各种样例
(1). 单文件上传
A.基础配置：Header表头、data参数、acceptMime筛选文件类型、accept+exts允许上传的文件和后缀、Size最大上传大小等
B.几个回调：choose选择文件后回调、before文件提交前回调、done上传成功后回调、error请求异常回调
代码分享：
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>文件上传</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link href="~/src/layuiadmin/layui/css/layui.css" rel="stylesheet" /> <link href="~/src/layuiadmin/style/admin.css" rel="stylesheet" /> <style> .c1 { width: 500px; height: 280px; border: 1px solid black; padding: 20px; float: left; } img { width: 200px; height: 200px; } </style> </head> <body> <div class="c1"> <button type="button" class="layui-btn" id="test1"> 单文件上传(各种属性) </button> <br /> <div> <img src="/DownLoad/Picture/demo.png" id="j_img1" /> </div> </div> <script src="~/src/layuiadmin/layui/layui.js"></script> <script> layui.use(['upload', 'jquery'], function () { var $ = layui.$; var upload = layui.upload; //1.单文件上传 var uploadInst1 = upload.render({ elem: '#test1', //绑定元素 url: 'SingleSaveFile', //上传接口 headers: { auth: window.localStorage.getItem("token") }, //表头 data: {}, //额外参数 acceptMime: 'image/*', //选择框筛选文件类型(不是很准确) accept: "file", //允许上传所有文件 //exts:"zip|rar|7z", //允许上传的后缀的类型,和accept配合使用 size: 0, //设置文件最大可允许上传的大小，单位 KB, 0表示不限制 choose: function (obj) { //选择文件后回调 }, before: function () { //文件提交前回调 layer.load(); //上传loading }, done: function (res) { //上传成功后回调 if (res.status == "ok") { alert(res.msg); $("#j_img1").attr("src", res.data); layer.closeAll('loading'); //关闭loading } }, error: function (index, upload) { //请求异常回调 layer.closeAll('loading'); //关闭loading } }); }); </script> </body> </html>
运行效果：
(2).多文件上传
A. 原理
LayUI的多文件上传只是一次可以选多个文件而已,是通过调用多次接口实现的,目前没有实现调用一次接口,所以这里还是调用SingleSaveFile，对于前端而言done回调每成功1个文件回调1次, allDone当所有文件提交后才能被触发，会返回文件总数、成功文件数、失败文件数。
B. 核心配置
(1). multiple: true, //允许多文件上传
(2). number: 2, //允许上传的文件数量,配合multiple使用
代码分享：
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>文件上传</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link href="~/src/layuiadmin/layui/css/layui.css" rel="stylesheet" /> <link href="~/src/layuiadmin/style/admin.css" rel="stylesheet" /> <style> .c1 { width: 500px; height: 280px; border: 1px solid black; padding: 20px; float: left; } img { width: 200px; height: 200px; } </style> </head> <body> <div class="c1"> <button type="button" class="layui-btn" id="test2"> 多文件上传 </button> <br /> <div id="j2"> </div> </div> <script src="~/src/layuiadmin/layui/layui.js"></script> <script> layui.use(['upload', 'jquery'], function () { var $ = layui.$; var upload = layui.upload; //2.多文件上传 var uploadInst2 = upload.render({ elem: '#test2', //绑定元素 url: 'SingleSaveFile', //上传接口 headers: { auth: window.localStorage.getItem("token") }, //表头 data: {}, //额外参数 acceptMime: 'image/*', //选择框筛选文件类型(不是很准确) accept: "file", //允许上传所有文件 //exts:"zip|rar|7z", //允许上传的后缀的类型,和accept配合使用 size: 0, //设置文件最大可允许上传的大小，单位 KB, 0表示不限制 multiple: true, //允许多文件上传 number: 2, //允许上传的文件数量,配合multiple使用 choose: function (obj) { //选择文件后回调 }, before: function () { //文件提交前回调 layer.load(); //上传loading }, allDone: function (obj) { //当文件全部被提交后，才触发 console.log(obj.total); //得到总文件数 console.log(obj.successful); //请求成功的文件数 console.log(obj.aborted); //请求失败的文件数 layer.closeAll('loading'); //关闭loading }, done: function (res) { //上传成功后回调(每成功一个文件,回调一次) if (res.status == "ok") { $("#j2").append('<img src="' + res.data + '"/>'); } }, error: function (index, upload) { //请求异常回调 //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传 layer.closeAll('loading'); //关闭loading } }); }); </script> </body> </html>
运行效果：
(3).非自动上传+队列
大致流程：
通过 auto: false设置不自动上传，然后通过 bindAction: '#test33' 指向一个按钮绑定上传，选择文件后进入choose回调，将文件存放到本地队列中，并且可以操作DOM，用于提前预览，上传成功后，修改本地DOM或者删除; 上传失败后,将本地DOM改为重新上传。
代码分享：
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>文件上传</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link href="~/src/layuiadmin/layui/css/layui.css" rel="stylesheet" /> <link href="~/src/layuiadmin/style/admin.css" rel="stylesheet" /> <style> .c1 { width: 500px; height: 280px; border: 1px solid black; padding: 20px; float: left; } img { width: 200px; height: 200px; } </style> </head> <body> <div class="c1"> <button type="button" class="layui-btn" id="test3"> 非自动上传+队列 </button> <button type="button" class="layui-btn" id="test33"> 点我上传 </button> <br /> <div id="j3"> </div> </div> <script src="~/src/layuiadmin/layui/layui.js"></script> <script> layui.use(['upload', 'jquery'], function () { var $ = layui.$; var upload = layui.upload; //3.非自动上传+队列 var uploadInst3 = upload.render({ elem: '#test3', //绑定元素 url: 'SingleSaveFile', //上传接口 headers: { auth: window.localStorage.getItem("token") }, //表头 data: {}, //额外参数 acceptMime: 'image/*', //选择框筛选文件类型(不是很准确) accept: "file", //允许上传所有文件 //exts:"zip|rar|7z", //允许上传的后缀的类型,和accept配合使用 size: 0, //设置文件最大可允许上传的大小，单位 KB, 0表示不限制 multiple: true, //允许多文件上传 number: 2, //允许上传的文件数量,配合multiple使用 auto: false, //选择文件后不自动上传 bindAction: '#test33', //指向一个按钮触发上传 choose: function (obj) { //选择文件后回调 //将每次选择的文件追加到文件队列 var files = obj.pushFile(); //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9) obj.preview(function (index, file, result) { console.log(index); //得到文件索引 console.log(file); //得到文件对象 //console.log(result); //得到文件base64编码，比如图片 //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增 //这里还可以做一些 append 文件列表 DOM 的操作 var tr = $(['<tr id="upload-' + index + '">' , '<td>' + file.name + '</td>' , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>' , '<td>等待上传</td>' , '<td>' , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">单个重传</button>' , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>' , '</td>' , '</tr>'].join('')); //单个重传（上传失败的时候配置成显示） tr.find('.demo-reload').on('click', function () { obj.upload(index, file); }); //删除 tr.find('.demo-delete').on('click', function () { delete files[index]; //删除对应的文件 tr.remove(); uploadInst3.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选 }); $("#j3").append(tr); //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用 //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用 }); }, before: function () { //文件提交前回调 //layer.load(); //上传loading }, allDone: function (obj) { //当文件全部被提交后，才触发 }, done: function (res) { //上传成功后回调(每成功一个文件,回调一次) if (res.status == "ok") { $("#j3").append('<img src="' + res.data + '"/>'); //删除列表中待上传的文件(或者改里面的内容，改成上传成功) } }, error: function (index, upload) { //请求异常回调 //配置上面显示重传按钮 } }); }); </script> </body> </html>
运行效果：
三. 基于dropzonejs文件上传
1. 相关地址
官网：https://www.dropzonejs.com/ （含文档和下载地址）
2. 各种样例
(1).单文件上传
maxFiles: 1 将该属性设置为1,只能选择一个文件上传。
另外：该控件默认会生成一个缩略图框，我们很多情况下不需要，可以采用下面的方式来解决。
previewsContainer: '#hid', //将缩略图存放到指定位置(然后将该位置隐藏，则不显示缩略图了)
(2).多文件上传
A.原理：这里的多文件上传只调用一次接口！！
B.核心配置：
uploadMultiple: true, //开启单次请求上传多个文件, 配合下面的parallelUploads适用
parallelUploads: 6, //并行允许上传文件的个数
maxFiles: 6, //一次性上传的文件数量上限
successmultiple和errormultiple //多文件成功回调 和 失败回调 (只调一次)
代码分享：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>样例1</title> <style> .c1 { width: 600px; height: 280px; border: 1px solid black; padding: 20px; float: left; } img { width: 150px; height: 150px; } </style> <script src="../../../js/easyui/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="../../../js/utils/dropzone.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { // 单文件上传 $("#test1").dropzone({ url: "http://localhost:29793/Demo_Areas/Demo1/SingleSaveFile", method: 'post', createImageThumbnails: false, //前端不生成缩略图（只是不生成图，但缩略框还在） headers: { "auth": window.localStorage.getItem("token") }, timeout: 1000000, //超时时间，单位毫秒, 默认30s maxFiles: 1, //一次性上传的文件数量上限(选择的时候最多选1个文件，无法多选) maxFilesize: 10, //最大文件上传大小 单位: MB previewsContainer: '#hid', //将缩略图存放到指定位置(将该位置隐藏，则不显示缩略图了) acceptedFiles: "image/*,application/pdf,.psd,.txt", //上传的类型 dictMaxFilesExceeded: "您最多只能一次上传n个文件", //替换文件数量超限的限制 dictInvalidFileType: '不支持该文件类型上传', //替换不支持类型上传的文案 dictFileTooBig: '您上传的文件太大,最大允许10M', //替换文件太大的文案 dictFallbackMessage: '您的浏览器不支持该上传控件', //替换浏览器不支持的文案 init:function(){ var that=this; this.on("complete",function(file){ // that.removeFile(file); that.removeAllFiles(); //执行完毕后，删除本地记录，使其可以继续上传（类似重置控件） }); }, sending: function(x1, x2, x3) { //发送文件之前调用，参数详见文档 }, success: function(file, res, e) { if (res.status == "ok") { var myUrl = "http://localhost:29793" + res.data; $("#j1").append('<img src="' + myUrl + '"/>'); } }, error: function(x1, errorMsg, xhr) { if (x1.status == "error") { alert(errorMsg); } } }); //多文件上传 $("#test2").dropzone({ url: "http://localhost:29793/Demo_Areas/Demo1/ManySaveFile", method: 'post', createImageThumbnails: false, //前端不生成缩略图（只是不生成图，但缩略框还在） headers: { "auth": window.localStorage.getItem("token") }, timeout: 1000000, //超时时间，单位毫秒, 默认30s uploadMultiple: true, //开启单次请求上传多个文件, 配合下面的parallelUploads适用 parallelUploads: 6, //并行允许上传文件的个数 maxFiles: 3, //一次性上传的文件数量上限 maxFilesize: 10, //最大文件上传大小 单位: MB previewsContainer: '#hid', //将缩略图存放到指定位置(将该位置隐藏，则不显示缩略图了) acceptedFiles: "image/*,application/pdf,.psd,.txt", //上传的类型 dictMaxFilesExceeded: "您最多只能一次上传n个文件", //替换文件数量超限的限制 dictInvalidFileType: '不支持该文件类型上传', //替换不支持类型上传的文案 dictFileTooBig: '您上传的文件太大,最大允许10M', //替换文件太大的文案 dictFallbackMessage: '您的浏览器不支持该上传控件', //替换浏览器不支持的文案 init:function(){ var that=this; this.on("complete",function(file){ that.removeAllFiles(); //执行完毕后，删除本地记录，使其可以继续上传（类似重置控件） }); }, sendingmultiple: function(x1, x2, x3) { //发送文件之前调用，参数详见文档 }, //多文件成功回调, 不能适用success回调，success会触发多次 successmultiple: function(file, res, e) { console.log(res); if (res.status == "ok") { for (var i = 0; i < res.data.length; i++) { var myUrl = "http://localhost:29793" + res.data[i]; $("#j2").append('<img src="' + myUrl + '"/>'); } } }, errormultiple: function(x1, errorMsg, xhr) { if (x1.status == "error") { alert(errorMsg); } }, error: function(x1, errorMsg, xhr) { if (x1.status == "error") { alert(errorMsg); } } }); }); </script> </head> <body> <p>图片上传dropzone样例</p> <div class="c1"> <button type="button" class="layui-btn" id="test1"> 单文件上传(各种属性) </button> <br /> <div id="j1"> </div> </div> <div class="c1"> <button type="button" class="layui-btn" id="test2"> 多文件上传 </button> <br /> <div id="j2"> </div> </div> <div id="hid" style="display: none;"> 用来存放缩略图，但不显示，目前没有找到直接关闭缩略图的属性 </div> </body> </html>
运行截图：
3. 其它
支持队列上传、文件分块上传、拖拽、其它各种情况的回调等等。
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。