版权声明：原创文章 转载注明出处 https://blog.csdn.net/ssd21988/article/details/86535584
MVC在项目中保存图片的几种方式
1.在控制器转换IO最后保存
2.直接储存图片路径进行保存
目标功能：新增人员档案时需要对人员的照片进行保存
当时第一想法是用老师交的把图片传入控制器然后进行io流转换最后保存进数据库，然而我感觉这样写似乎有点复杂。
//处理图片
public ActionResult UpEeditorFile(HttpPostedFileBase upload)
{
try
{
if (upload != null)
{
//返回后缀。GetExtension upload.FileName获取文件的全名 判断是否为图片
string fileExtension = Path.GetExtension(upload.FileName);
//ToLower将字符串转换为小写形式地副本
fileExtension = fileExtension.ToLower();
//判断上传的附件格式 Contains筛选
if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileExtension))
{
//检查目录是否存在,不存在就创建文件夹Server.MapPath
if (!Directory.Exists(Server.MapPath("~/Document/Notice/")))
{
//在项目所在的位置添加它的子目录
Directory.CreateDirectory(Server.MapPath("~/Document/Notice/"));
}
//拼接文件名====当前日期+全球唯一标识符+后缀（目的是区分上传的图片）+Guid. NewGuid随机数 + 文件后缀
string fileName = DateTime.Now.ToString("yyyy-MM-dd") + "-" + Guid.NewGuid() + fileExtension;
//获取物理路径===也就是绝对路径
string filePath = Server.MapPath("~/Document/Notice/") + fileName;
//把文件保存到物理路径当中
upload.SaveAs(filePath);
//获取上传的临时文件表(未保存的)
List<string> tempFile = new List<string>();
if (Session["tempEditorFile"] != null)
{
tempFile = Session["tempEditorFile"] as List<string>;
}
//未保存公告的临时文件
tempFile.Add(fileName);
//保存到session
Session["tempEditorFile"] = tempFile;
string url = "/Document/Notice/" + fileName;
var CKEditorFuncNum = System.Web.HttpContext.Current.Request["CKEditorFuncNum"];
// 上传成功后，我们还需要通过以下的一个脚本把图片返回到ckeditor第一个 tab(图像信息) 选项页
return Content("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");
}
else
{
//判断后缀发现不是图片，提示用户
return Content("<script>alert('只能上传图片', { icon: 0, title: '提示' });</script>");
}
}
}
catch (Exception)
{
throw;
}
return Content("<script>alert('上传图片失败！', { icon: 5, title: '提示' });</script>");
}
只是想简单的保存图片，能不能直接在页面处理好数据在控制器就直接保存？
当然是可以的，最近在制作H5的过程中发现图片可以转换成base64的格式进行保存，这个方法同样也可以用于解决这个需求。
通过base64 实现图片的保存
实现思路：通过js在页面将图片处理为base64格式，然后在提交至控制器保存到数据库。回填时只需要将对应的base64编码查出来就能直接回填图片。
1.将图片转成base64编码
var imgReaderI = new FileReader();
//图片显示
imgReaderI.onload = function (evt) {
$("#Head").attr('src', evt.target.result);
}
//文件上传事件
$('#txss').on('change', function () {
var file = document.getElementById('txss').files[0];
imgReaderI.readAsDataURL(file);
var size=file.size;
imgReaderI.onloadend = function (evt) {
//判断图片大小是否需要进行压缩
if (size > 600) {
dealImage(this.result, { width: 180 });
} else {
//$('#ryglfo [name="Head"]')是一个隐藏的input方便提交base64数据
//this.result 就是图片的base64编码
$('#ryglfo [name="Head"]').val(this.result);
}
}
});
//图片压缩转换
function dealImage(path, obj) {
var img = new Image();
img.src = path;
img.onload = function () {
var that = this;
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.85; //压缩质量 1是不压缩
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
var base64 = canvas.toDataURL('image/jpeg', quality);
//最后返回压缩后的base64编码
$('#ryglfo [name="Head"]').val(base64)
}
}
base64编码
img标签的路径可以直接用base64编码显示图片
数据提交到控制器代码
这里使用的是ajax提交，用jgetjson提交会存在大小限制的问题
$("#ryglfo").ajaxSubmit(function (msg) {});
保存到数据库的数据
这里直接当做字符串对图片的base64编码进行存储
图片的显示
图片要显示时直接将查询到的base64编码作为图片路径即可
$("#Head").attr("src", data.Head);