基于.NetCore开发博客项目 StarBlog - (9) 图片批量导入

共 3316字,需浏览 7分钟

 ·

2022-05-30 23:44

系列文章

前言

前面把分类层级结构做出来了,不过还不完美,然后我就又折腾了一波,把那个组件fork了一份魔改实现了我要的效果,还顺便上传了NPM包,详情可以看这篇文章:魔改了一下bootstrap-treeview组件,发布个NPM包体验一下

文章这部分就暂时完成了,接下来是摄影模块,首先要搞定图片的批量导入。

理清需求

先来看看模型设计

public class Photo {
    [Column(IsIdentity = false, IsPrimary = true)]
    public string Id { getset; }
    public string Title { getset; }
    public string Location { getset; }
    public string FilePath { getset; }
    public long Height { getset; }
    public long Width { getset; }
    public DateTime CreateTime { getset; }
}

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 {
    /// 
    /// 获取图片的物理存储路径
    /// 

    /// 
    /// 
    private string GetPhotoFilePath(Photo photo) {
        return Path.Combine(_environment.WebRootPath, "media", photo.FilePath);
    }
    
    /// 
    /// 重建图片数据(扫描图片的大小等数据)
    /// 

    /// 
    /// 
    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 BatchImport() {
    var result = new List();
    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

为了有始有终,把接口这部分代码也贴一下

/// 
/// 批量导入图片
/// 

/// 
[Authorize]
[HttpPost("[action]")]
public ApiResponse> BatchImport() {
    var result = _photoService.BatchImport();
    return new ApiResponse> {
        Data = result,
        Message = $"成功导入{result.Count}张图片"
    };
}

导入完成后接口返回图片列表

实现效果

皮一下… 这部分没有图片,等下一篇介绍图片瀑布流就有啦~


浏览 39
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报