• 基于.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}张图片"
        };
    }
    

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

    实现效果

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


    __EOF__

  • 本文作者: 程序设计实验室
  • 本文链接: https://www.cnblogs.com/deali/p/16328825.html
  • 关于博主: 公众号:程序设计实验室,欢迎交流~
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
  • 声援博主: 如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。
  • 相关阅读:
    React之组件实例的三大属性之props
    Vue源码:手写patch函数,diff算法
    Matlab —— 03结构化程式与自定义函数
    断网重连里面的长连接,短链接和心跳机制
    Spring boot环境搭建
    腾讯mini项目-【指标监控服务重构-会议记录】2023-08-04
    [vue2项目]vue2+supermap[mapboxgl]+天地图之地图的基础操作(画线+自定义打点)
    【Mixup】《Mixup:Beyond Empirical Risk Minimization》
    Kindle电子书下载功能关闭怎么办,借助calibre和cpolar搭建私有的网络书库公网访问
    C++ STL详解(三) ------- list
  • 原文地址:https://www.cnblogs.com/deali/p/16328825.html