学习ASP.NET Core Blazor编程系列十八——文件上传（中）

￡神魔★判官ぃ 2024-03-16 13:49 16阅读 0赞

上篇[学习ASP.NET Core Blazor编程系列十七——文件上传（上）][ASP.NET Core Blazor]文章我们学习了如何将文件上传至服务器，但是我们并没有将文件的一些信息保存下来，无法进行查询，无法得知我们上传了一些什么文件。本篇文章演示如何将上传文件的一些基本信息保存到数据库，从而可以对上传文件进行简单管理。

## 三、添加FileDescribe类 ##

在Visual Studio 2022的解决方案资源管理器中，鼠标左键选中“Models”文件夹，右键单击，在弹出菜单中选择“添加—>类”。 将类命名为“**FileDescribe**”，并添加以下属性，代码如下：

![db69fdb7364e8cdcc93360e12c973def.gif][]

using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Xml.Linq;
     
    namespace BlazorAppDemo.Models
    {
        public class FileDescribe
    
        {
            [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
            [Required]
    
            [Key]
            public int ID { get; set; }
    
     
    
            [Display(Name = "文件名称")]
    
            [Required]
            [StringLength(100)] 
    
            public string Name { get; set; }
            [Display(Name = "上传后文件名称")]
            [StringLength(100)]
            public string NewName { get; set; }
     
     
    
            [Display(Name = "文件大小(bytes)")]
            [DisplayFormat(DataFormatString = "{0:N1}")]
            public long FileSize { get; set; }
    
     
            [Display(Name = "文件描述")]
            public string PubliceDescribe { get; set; }
    
    
            [Display(Name = "文件路径")]
            [StringLength(300)]
            public string FullName { get; set; }
    
            [Display(Name = "上传时间(UTC)")]
            [DisplayFormat(DataFormatString = "{0:F}")]
            [Required]
            public DateTime UploadDateTime { get; set; }
    
    
        }
    }

![e58f377a8aa07492a017aa171ff00453.gif][]

此类使用 Display 和 DisplayFormat 特性，有前端显示时，这些特性会生成友好的标题和格式。

## 四、修改BookContext ##

在Visual Studio 2022的解决方案资源管理器中找到BookContext (Models/BookContext.cs) 文件，使用鼠标左键双击在文本编辑器中打开，并修改代码如下：

![aceea08e125c6350021b1f68d9955b1a.gif][]

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.EntityFrameworkCore;
     
     
    namespace BlazorAppDemo.Models
    {
        public class BookContext:DbContext
        {
            public BookContext(DbContextOptions<BookContext> options)
     
                  : base(options)
            {
               
           }
    
     
            public DbSet<Book> Book { get; set; }
            public DbSet<FileDescribe> FileDescribe { get; set; }
    
     
        }
    
    }

![1d7cdcb5e82d4db4bcca3505335140a3.gif][]

## 五、将 “FileDescribe” 类生成数据库表 ##

1.在Visual Studio 2022中打开程序包管理器控制台 (PMC)，“菜单栏>工具> NuGet 包管理器 > 程序包管理器控制台”。

![768c2a7113a27d819c7b0e89aa864383.png][]

2.在 PMC 中分别执行以下两条命令。这两条命令将实现向数据库中添加 FileDescribe表，执行结果发下图1、与图2。

Add-Migration AddFileDescribeTable

Update-Database

![8c90d1183eeced02e4a320875bbf2964.png][]

图1

![4f924d23162bcf5ecc0e0b1be0d840e1.png][]

图2

3.在执行以上指令之后，会在数据库中添加FileDescribe表，结果如下图。

![6f96327e533a68cd69122c76b4b6564e.png][]

[ASP.NET Core Blazor]: https://www.cnblogs.com/chillsrc/p/16990664.html
[db69fdb7364e8cdcc93360e12c973def.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/99c21e432ee247889ee856d35ef80f1a.png
[e58f377a8aa07492a017aa171ff00453.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/5faf87abc07e4a9e833516f35ebd901f.png
[aceea08e125c6350021b1f68d9955b1a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d9081104661b4194bd24c1d387dec79f.png
[1d7cdcb5e82d4db4bcca3505335140a3.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/71cd49b9604648b281ad1a86cc9bad2b.png
[768c2a7113a27d819c7b0e89aa864383.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1ecf06c63de748ce96f3b5f26b42b015.png
[8c90d1183eeced02e4a320875bbf2964.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/4956cc144d2f4d0db56c39a489d17601.png
[4f924d23162bcf5ecc0e0b1be0d840e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/5936f65650184be1a314742b61386ab1.png
[6f96327e533a68cd69122c76b4b6564e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/32d1fb50d3f644c9b9d646b3b9af3026.png