系列文章
- 基于.NetCore开发博客项目 StarBlog – (1) 为什么需要自己写一个博客?
- 基于.NetCore开发博客项目 StarBlog – (2) 环境准备和创建项目
- 基于.NetCore开发博客项目 StarBlog – (3) 模型设计
- 基于.NetCore开发博客项目 StarBlog – (4) markdown博客批量导入
- 基于.NetCore开发博客项目 StarBlog – (5) 开始搭建Web项目
- 基于.NetCore开发博客项目 StarBlog – (6) 页面开发之博客文章列表
- 基于.NetCore开发博客项目 StarBlog – (7) 页面开发之文章详情页面
- 基于.NetCore开发博客项目 StarBlog – (8) 分类层级结构展示
- 基于.NetCore开发博客项目 StarBlog – (9) 图片批量导入
- …
前言
前面把分类层级结构做出来了,不过还不完美,然后我就又折腾了一波,把那个组件fork了一份魔改实现了我要的效果,还顺便上传了NPM包,详情可以看这篇文章:魔改了一下bootstrap-treeview组件,发布个NPM包体验一下
文章这部分就暂时完成了,接下来是摄影模块,首先要搞定图片的批量导入。
理清需求
先来看看模型设计
public class Photo { [Column(IsIdentity = false, IsPrimary = true)] public string Id { get; set; } public string Title { get; set; } public string Location { get; set; } public string FilePath { get; set; } public long Height { get; set; } public long Width { get; set; } public DateTime CreateTime { get; set; } }
PS:其中Location
是照片的拍摄地点,FilePath
是存储相对路径。
之前路线图中设定的是要支持图片Exif数据读取并自动定位,不过目前第一版没有实现,需要手动输入地点,存在Location
字段中。
然后还有需要读取图片的长跟宽,保存起来,后面做瀑布流展示的时候有用。
那么,流程也理清了:扫描目录 -> 复制图片 -> 读取图片信息 -> 保存到数据库
代码实现
OK,可以开始写代码了
扫描目录和复制都比较简单,先来看看如何获取图片的尺寸。
在.Net Framework时代,框架内置有操作图片的标准库,但.Net Core时代就无了,好像是因为之前的库是跟GDI这种Windows平台独有技术绑定的,为了跨平台只能砍了
不过.NetCore有个非常厉害的ImageSharp
库可以操作图片,作者是SixLabors,这名字很有意思啊,六个劳工,哈哈
读取图片
那么先来写个读取图片信息的方法
编辑StarBlog.Web/Services/PhotoService.cs
文件,在PhotoService
中添加方法
using SixLabors.ImageSharp; public class PhotoService { /// <summary> /// 获取图片的物理存储路径 /// </summary> /// <param name="photo"></param> /// <returns></returns> private string GetPhotoFilePath(Photo photo) { return Path.Combine(_environment.WebRootPath, "media", photo.FilePath); } /// <summary> /// 重建图片数据(扫描图片的大小等数据) /// </summary> /// <param name="photo"></param> /// <returns></returns> private Photo BuildPhotoData(Photo photo) { var savePath = GetPhotoFilePath(photo); using (var img = Image.Load(savePath)) { photo.Height = img.Height; photo.Width = img.Width; } return photo; } }
传入Photo对象,根据图片完整路径去加载,然后把宽度和高度存到对应的属性里
批量导入
接着来写批量导入的方法,完整代码见:https://github.com/Deali-Axy/StarBlog/blob/master/StarBlog.Web/Services/PhotoService.cs
public List<Photo> BatchImport() { var result = new List<Photo>(); var importPath = Path.Combine(_environment.WebRootPath, "assets", "photography"); var root = new DirectoryInfo(importPath); foreach (var file in root.GetFiles()) { var photoId = GuidUtils.GuidTo16String(); var filename = Path.GetFileNameWithoutExtension(file.Name); var photo = new Photo { Id = photoId, Title = filename, CreateTime = DateTime.Now, Location = filename, FilePath = Path.Combine("photography", $"{photoId}.jpg") }; var savePath = GetPhotoFilePath(photo); file.CopyTo(savePath, true); photo = BuildPhotoData(photo); _photoRepo.Insert(photo); result.Add(photo); } return result; }
只扫描一层文件目录,不像博客批量导入那样递归遍历所有子目录
因为图片的没有层级结构
这个方法最后返回导入的图片列表
导入的图片会复制到StarBlog.Web/wwwroot/assets/photography
下
没有像导入博客那样写在单独一个Project里是因为这个功能需要用接口来调用(其实导入博客也需要,后续我会整合到blogService中)
Controller
为了有始有终,把接口这部分代码也贴一下
/// <summary> /// 批量导入图片 /// </summary> /// <returns></returns> [Authorize] [HttpPost("[action]")] public ApiResponse<List<Photo>> BatchImport() { var result = _photoService.BatchImport(); return new ApiResponse<List<Photo>> { Data = result, Message = $"成功导入{result.Count}张图片" }; }
导入完成后接口返回图片列表
实现效果
皮一下… 这部分没有图片,等下一篇介绍图片瀑布流就有啦~