.Net Core WebApi上传图片的两种方式
2021-05-19 23:29
YPE html>
标签：一起 ons obj client 前端 exist param alert 格式标记
我这边主要是为了上传图片，话不多说，上代码。
方式一：通过Form表单上传
后端：
////// 上传图片,通过Form表单提交 /// ///[Route("Upload/FormImg")] [HttpPost] public ActionResult UploadImg(List files) { if (files.Count filenames = new List (); 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) 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("上传失败"); } }
我这里主要是为了提交图片数据，所以有比较多的对图片文件的条件判断，这里可以根据需求，自行调整。包括文件的存储方式。
前端：
.Net Core WebApi图片上传 通过form表单提交
除了上传写的提交方式，另外还有两种提交数据的方式：
方式二：
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(‘
‘);
}
}else{
alert(‘提交失败,重新尝试提交‘);
}
}
})
};
方式三：
前端这里，要注意几点：
1、Form表中一定要加上 enctype="multipart/form-data" 标签
2、文件上传的 file 控件上，如果要一次上传多张图片，需要加上 multiple 标签
3、方式一中： formdata.append("files", files[i]) 的 files 必须和接口接受文件的参数名一致
4、方式二和方式三中： 中的 name 必须和接口接受文件的参数名一致
通过Form提交文件的方式总结：
前端提交文件的三种方式都可以使用。
如果文件需要和表单中其他数据一起提交，可以使用方式二和方式三。
如果只要单独提交一个文件数据，可以使用方式一。
====================华丽的分割线====================
方式二：通过Base64字符上传
后端：
////// 文件上传，Base64 /// /// Base64 /// 文件名 ///[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上，也可以采用上面的方法，保存的本地。最终都是返回文件的路径。
前端：
.Net Core WebApi图片上传 通过文件转为Base64字符提交
这里需要注意的是文件在前端转成Base64字符后，需要在字符的前面去掉文件的格式标签。不然到后端会无法正常读取Base64的字符。
或者在后端接收数据后，做处理也可以。
补充：
_hostingEnvironment的定义
private readonly IHostingEnvironment _hostingEnvironment;
public UploadController(IHostingEnvironment hostingEnvironment,IOptions _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
.Net Core WebApi上传图片的两种方式
标签：一起 ons obj client 前端 exist param alert 格式标记
原文地址：https://www.cnblogs.com/pingming/p/11330921.html
文章标题：.Net Core WebApi上传图片的两种方式
文章链接：http://soscw.com/index.php/essay/87792.html