网站内容管理系统上传图片(本篇第一种图片上传的方法和使用范围和优缺点的区别)
优采云 发布时间: 2021-12-11 09:02网站内容管理系统上传图片(本篇第一种图片上传的方法和使用范围和优缺点的区别)
图片上传和显示是互联网应用中比较常见的功能。最近的一个门户项目网站，有多个需要上传图片的功能模块。关于这部分内容，原来的功能并不复杂，但是后面做起来还是有些波折的。由于经验不足，对上传多张图片的方法、使用范围、优缺点等都不是很了解，导致在做相关功能的时候走了不少弯路。
一开始我用的是SaveAs(...)方法来保存图片（这个方法也记录在这个博客中），因为这个方法比其他方法简单很多。当我用这个方法把后台所有的图片上传模块都做完了，准备把数据绑定到portal网站前台页面的时候，就出现了黑幕，因为这个方法只能保存数据在当前项目下的文件夹中，并且只能被当前项目访问。我的门户网站的前台和后台管理系统是两个不同的项目。导致后台上传的图片无法通过门户网站的前台获取。那个时候，我的心凉了，这意味着我不得不重新做我以前上传图片的所有模块。我被噎住了 但没有办法。吃一口长成智者，毕竟是菜鸟。没有经验。
在这个博客中，我主要想记录第一个图片上传方法。前端使用的图片上传控件为layui，数据库为sql server，代码优先开发模式。为了避免一些不必要的额外工作量，我会直接在公司的一个开发框架上进行开发，但是（如果你像我这样的菜鸟）不要太担心，因为在实际应用中并没有什么。公司框架紧密耦合，不可或缺。
我开始在下面写：
一、创建表
由于图片上传后需要保存路径等信息，所以必须先创建一个Image表。表设计如下：
字段名称
类型
评论
ID
指南
首要的关键
名称
nvarchar(50)
图片名称
网址
nvarchar(50)
关联
上传时间
约会时间
上传时间
评论
nvarchar(200)
评论
删除
布尔值
是否被删除
我们看一下实体类和上下文的代码：
1.新实体类Image.cs
如图：
代码显示如下：
图像文件
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Modules
{
[Table("Info_Image")]
public class Image
{
public Image() {
IsDelete = false;
}
///
/// 主键id
///
public Guid Id { get; set; }
///
/// 图片名
///
[Required]
[MaxLength(50)]
public string Name { get; set; }
///
/// 图片保存链接
///
[Required]
[MaxLength(50)]
public string Url { get; set; }
///
/// 上传时间
///
public DateTime UploadTime { get; set; }
///
/// 备注
///
[MaxLength(200)]
public string Remark { get; set; }
///
/// 是否删除
///
public bool IsDelete { get; set; }
}
}
2.将实体类添加到上下文中：
如图：
代码：
MyDbContext.cs
public DbSet Images { get; set; }
如果你和我一样是code first的开发模式，那就让程序再运行一下，这个数据表应该在你的数据库里生成了，哈哈，这只是一个建表过程，只要建表就可以，任何模式好吧，哈哈。
二、前端代码
1.新建控制器ImageUploadController.cs，然后创建视图Index.cshtml：
这里会用到layui的图片上传，关于这部分代码的使用，可以到layui官网查看：；
下面是页面图片，以及代码：
这是没有写后台上传图片的代码时的页面图片：
以下是前端代码：
@{
Layout = "../Shared/_TopLayout.cshtml";
}
Index
图片标题
备注
上传图片
上传图片
图片展示
<img class="layui-upload-img" id="demo1" style="width:200px;height:auto;">
layui.use('upload', function () {
var $ = layui.jquery;
var upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1',
url: '@Url.Action("Upload","ImageUpload")', //上传地址，后台的某个控制器
before: function (obj) {
obj.preview(function (index, file, result) {
$('#demo1').attr('src', result);
});
}, //长传之前执行的代码，将需要上传的图片显示在页面上
done: function (res) {
if (res.Result) {
}
}, //上传成功后的回传数据，后台代码未编写，此处尚为写任何内容，将在后面的内容中补上
error: function () {
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('上传失败 <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
});
三、后端代码和前端代码完美
接下来在上面代码中显示的后台链接（
) 编写图片上传代码：
先贴出代码，再说明上传思路：
图片上传控制器.cs
///
/// 上传图片
///
///
public ActionResult Upload()
{
try
{
HttpFileCollectionBase files = Request.Files;
HttpPostedFileBase file = files[0];
//获取文件名后缀
string extName = Path.GetExtension(file.FileName).ToLower();
//获取保存目录的物理路径
if (System.IO.Directory.Exists(Server.MapPath("/Images/")) == false)//如果不存在就创建images文件夹
{
System.IO.Directory.CreateDirectory(Server.MapPath("/Images/"));
}
string path = Server.MapPath("/Images/"); //path为某个文件夹的绝对路径，不要直接保存到数据库
// string path = "F:\\TgeoSmart\\Image\\";
//生成新文件的名称，guid保证某一时刻内图片名唯一（文件不会被覆盖）
string fileNewName = Guid.NewGuid().ToString();
string ImageUrl = path + fileNewName + extName;
//SaveAs将文件保存到指定文件夹中
file.SaveAs(ImageUrl);
//此路径为相对路径，只有把相对路径保存到数据库中图片才能正确显示（不加~为相对路径）
string url = "\\Images\\" + fileNewName + extName;
return Json(new
{
Result = true,
Data = url
});
}
catch (Exception exception)
{
return Json(new
{
Result = false,
exception.Message
});
}
}
上面代码中有详细的注释信息。这里需要注意的是我们保存图片的路径问题。
Server.MapPath（）函数获取的是某个文件夹的绝对路径，关于这个函数的一些用法我百度一份截图贴在这里：
（图片来自网络截图）
从上图中Server.MapPath()获取图片的绝对路径。在实际调用图片时，考虑到网站的安全性，浏览器不允许我们的页面使用绝对路径获取图片资源。所以数据库中保存的路径只能是相对路径，就是代码中这句话的作用：
上面代码中，我没有直接将imageUrl保存到数据库中，而是生成了一个相对路径来保存图片，原因是这样的。
下面给出完整的前端代码，包括图片上传的改进和所有信息的保存：
<p>@{
Layout = "../Shared/_TopLayout.cshtml";
}
Index
图片标题
备注
上传图片
上传图片
图片上传前展示
<img class="layui-upload-img" id="demo1" style="width:200px;height:auto;">
