我这边主要是为了上传图片,话不多说,上代码。
方式一:通过Form表单上传
后端:
/// <summary> /// 上传图片,通过Form表单提交 /// </summary> /// <returns></returns> [Route("Upload/FormImg")] [HttpPost] public ActionResult UploadImg(List<IFormFile> files) { if (files.Count<1) { return Error("文件为空"); } //返回的文件地址 List<string> filenames = new List<string>(); var now = DateTime.Now; //文件存储路径 var filePath = string.Format("/Uploads/{0}/{1}/{2}/", now.ToString("yyyy"), now.ToString("yyyyMM"), now.ToString("yyyyMMdd")); //获取当前web目录 var webRootPath = _hostingEnvironment.WebRootPath; if (!Directory.Exists(webRootPath + filePath)) { Directory.CreateDirectory(webRootPath + filePath); } try { foreach (var item in files) { if (item != null) { #region 图片文件的条件判断 //文件后缀 var fileExtension = Path.GetExtension(item.FileName); //判断后缀是否是图片 const string fileFilt = ".gif|.jpg|.jpeg|.png"; if (fileExtension == null) { break; //return Error("上传的文件没有后缀"); } if (fileFilt.IndexOf(fileExtension.ToLower(), StringComparison.Ordinal) <= -1) { break; //return Error("请上传jpg、png、gif格式的图片"); } //判断文件大小 long length = item.Length; if (length > 1024 * 1024 * 2) //2M { break; //return Error("上传的文件不能大于2M"); } #endregion var strDateTime = DateTime.Now.ToString("yyMMddhhmmssfff"); //取得时间字符串 var strRan = Convert.ToString(new Random().Next(100, 999)); //生成三位随机数 var saveName = strDateTime + strRan + fileExtension; //插入图片数据 using (FileStream fs = System.IO.File.Create(webRootPath + filePath + saveName)) { item.CopyTo(fs); fs.Flush(); } filenames.Add(filePath + saveName); } } return Success(filenames); } catch (Exception ex) { //这边增加日志,记录错误的原因 //ex.ToString(); return Error("上传失败"); } }
我这里主要是为了提交图片数据,所以有比较多的对图片文件的条件判断,这里可以根据需求,自行调整。包括文件的存储方式。
前端:
<!DOCTYPE html> <html> <head> <title>.Net Core WebApi图片上传</title> <meta charset="utf-8"/> <script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/js/jquery.form.min.js"></script> </head> <body> <h1>通过form表单提交</h1> <form id="myform" name="myform" method="post" enctype="multipart/form-data" action="https://localhost:44376/Upload/FormImg"> <input type="file" name="files" id="files" value="选择需要上传的文件" multiple /> <input type="button" id="submitbtn" value="提交" onclick="uplpadfile()"> </form> <div> 上传的图片,返回的地址 <div id="imglist">
</div> </div> <script type="text/javascript">
//前端第一种提交方式 function uplpadfile(){ //获取表单的数据 var formdata var file = $("#files").get(0); var files = file.files; var formdata = new FormData(); for (var i = 0; i < files.length; i++) { formdata.append("files", files[i]); } $.ajax({ type:‘Post‘, data:formdata, contentType: false, processData: false, url:"https://localhost:44376/Upload/FormImg", success:function(result){ if (result.Success) { var imglist =result.Data; for(var i in imglist){ $("#imglist").append(‘<img src="‘+imglist[i]+‘"/>‘); } }else{ alert(‘提交失败,重新尝试提交‘); } } }) }; </script> </body> </html>
除了上传写的提交方式,另外还有两种提交数据的方式:
方式二:
function uplpadfile(){ //获取表单的数据 var formdata = new FormData(document.getElementById("myform")); $.ajax({ type:‘Post‘, data:formdata, contentType: false, processData: false, url:"https://localhost:44376/Upload/FormImg", success:function(result){ if (result.Success) { var imglist =result.Data; for(var i in imglist){ $("#imglist").append(‘<img src="‘+imglist[i]+‘"/>‘); } }else{ alert(‘提交失败,重新尝试提交‘); } } }) }; </script>
方式三:
<script type="text/javascript"> function uplpadfile(){ $("#myform").ajaxSubmit(function(result){ if (result.Success) { var imglist =result.Data; for(var i in imglist){ $("#imglist").append(‘<img src="‘+imglist[i]+‘"/>‘); } }else{ alert(‘提交失败,重新尝试提交‘); } }); }; </script>
前端这里,要注意几点:
1、Form表中一定要加上 enctype="multipart/form-data" 标签
2、文件上传的 file 控件上,如果要一次上传多张图片,需要加上 multiple 标签
3、方式一中: formdata.append("files", files[i]) 的 files 必须和接口接受文件的参数名一致
4、方式二和方式三中:<input type="file" name="files"> 中的 name 必须和接口接受文件的参数名一致
通过Form提交文件的方式总结:
前端提交文件的三种方式都可以使用。
如果文件需要和表单中其他数据一起提交,可以使用方式二和方式三。
如果只要单独提交一个文件数据,可以使用方式一。
====================华丽的分割线====================
方式二:通过Base64字符上传
后端:
/// <summary> /// 文件上传,Base64 /// </summary> /// <param name="fileBase64">Base64</param> /// <param name="fileName">文件名</param> /// <returns></returns> [HttpPost] [Route("Upload/Base64")] public ActionResult UploadBase64(string fileBase64, string fileName) { byte[] bytes = fileBase64.ToBytes_FromBase64Str(); var fileExtension = Path.GetExtension(fileName); var strDateTime = DateTime.Now.ToString("yyMMddhhmmssfff"); //取得时间字符串 var strRan = Convert.ToString(new Random().Next(100, 999)); //生成三位随机数 var saveName = strDateTime + strRan + fileExtension; var savePath = "Upload/Img/" + DateTime.Now.ToString("yyyyMMdd") + "/" + saveName; string filePath = "https://oss.tiaobox.com/" + savePath; try { //将文件上传到阿里云oss using (MemoryStream m = new MemoryStream(bytes)) { var client = new OssClient(aliyunconfig.EndPoint, aliyunconfig.AccessKeyID, aliyunconfig.AccessKeySecret); PutObjectRequest _objRequest = new PutObjectRequest(aliyunconfig.BucketName, savePath, m); client.PutObject(_objRequest); } return Success(filePath); } catch (Exception ex) { WriteSysLog(ex.ToString(), Entity.Base_SysManage.EnumType.LogType.接口调用异常); return Error("上传失败!"); } }
这个后端方法,每次只能上传一个文件,前端需要把文件转成Base64的字符提交。
这里保存数据的方式,是保存到阿里云的OSS上,也可以采用上面的方法,保存的本地。最终都是返回文件的路径。
前端:
<!DOCTYPE html> <html> <head> <title>.Net Core WebApi图片上传</title> <meta charset="utf-8"/> <script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/js/jquery.form.min.js"></script> </head> <body> <h1>通过文件转为Base64字符提交</h1> <input type="file" name="basefile" id="basefile" value="选择需要上传的文件" multiple /> <script type="text/javascript"> $("#basefile").change(function(){ var basefile = base64(document.getElementById("basefile")); }) //上传文件 function updateBackground(filename,imgurl){ //提交前,去除格式标记 imgurl = imgurl.replace("data:image/jpeg;base64,", "").replace("data:image/png;base64,", "").replace("data:image/jpg;base64,", "").replace("data:image/gif;base64,", "").replace("data:image/bmp;base64,", ""); // urlElement.innerHTML = imgurl; var businessParam = { fileBase64:imgurl, fileName:filename }; $.ajax({ url:‘https://localhost:44376/Upload/Base64‘, data:businessParam, type:‘post‘, dataType:‘json‘, success:function(result){ if (result.Success) { alert("上传成功"); }else{ alert("上传失败"); } }, error: function(data) { alert("error:"+data.Error); } }) } //文件转为Base64 function base64(file) { if (typeof (FileReader) === ‘undefined‘) { alert("抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!"); } var reader = new FileReader(); var pos = file.files[0].name.lastIndexOf("."); var type = file.files[0].name.substring(pos + 1); //判断文件格式 if (type.toLowerCase() != "png" && type.toLowerCase() != ‘jpg‘ && type.toLowerCase() != ‘jpeg‘ && type.toLowerCase() != ‘gif‘ && type.toLowerCase() != ‘bmp‘) { alert("格式错误,请上传‘png、jpg、jpeg、bmp、gif‘格式文件"); return; } reader.onloadend = ( function(e) { imgurl = e.target.result; updateBackground(file.files[0].name,imgurl); } ); // Read the file reader.readAsDataURL(file.files[0]); } </script> </body> </html>
这里需要注意的是文件在前端转成Base64字符后,需要在字符的前面去掉文件的格式标签。不然到后端会无法正常读取Base64的字符。
或者在后端接收数据后,做处理也可以。
补充:
_hostingEnvironment的定义
private readonly IHostingEnvironment _hostingEnvironment; public UploadController(IHostingEnvironment hostingEnvironment,IOptions<AliyunConfig> _aliyunconfig) { _hostingEnvironment = hostingEnvironment; aliyunconfig = _aliyunconfig.Value; }
ToBytes_FromBase64Str 是对 String 类的方法扩展
public static byte[] ToBytes_FromBase64Str(this string base64Str) { return Convert.FromBase64String(base64Str); }
如果有什么错误或者欠缺的地方,欢迎指正,互相学习。
文章参考,里面还有讲述关于大文件的上传:
https://www.cnblogs.com/seabluescn/p/9229760.html
转:https://www.cnblogs.com/leoxuan/articles/11087121.html