如何在asp.net core 2 , razor pages中上传图片到磁盘

Question

我是asp.net框架的初学者，但我真的鼓励学习和应用它。 https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start

我跟着它，一切正常，我通过添加新模型，表格。

假设我们有电影模型，它是：

public class Movie
{
    public int ID { get; set; }
    public string Title { get; set; }
    public DateTime ReleaseDate { get; set; }
    public string Genre { get; set; }
    public decimal Price { get; set; }
}

下面是创建过程的代码：

public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        _context.Movie.Add(Movie);
        await _context.SaveChangesAsync();

        return RedirectToPage("./Index");
    }

以下是来自的部分：

        <div class="form-group">
            <label asp-for="Movie.Price" class="control-label"></label>
            <input asp-for="Movie.Price" class="form-control" />
            <span asp-validation-for="Movie.Price" class="text-danger"></span>
        </div>

现在我想在表单中添加一个新字段来上传“封面图片”，这样用户就可以浏览并选择电影的封面图片以在同一表单中上传。

我的问题是：

• 我想将文件名存储在数据库中，所以每部电影都有一个“CoverImage”列，然后我可以用它来显示或删除。这是好方法吗？

• 存储文件的最佳位置是什么？在“wwwroot”或其他文件夹中还是无关紧要？

• 上传图像的最佳或最新方法是什么？我应该在上面的三段代码中添加什么？我进行了搜索，发现了许多方法和方法，但是作为asp.net 的专家，我需要从您那里了解什么是最佳方法。

Answer 1

要将图像路径存储在表中，您需要首先向实体类添加一个属性，以便它会在您的表中创建一列。

public class Movie
{
    public int ID { get; set; }
    public string Title { get; set; }
    public DateTime ReleaseDate { get; set; }
    public string Genre { get; set; }
    public decimal Price { get; set; }
    public string ImageName  { set;get;}   // This is the new property
}

现在要从 UI 接收文件，您需要向 PageModel 类型的类添加一个新属性 IFormFile

public class CreateModel : PageModel
{
    [BindProperty]
    public Movie Movie { set; get; }

    [BindProperty]
    public IFormFile Image { set; get; }
}

现在在您的表单中，添加一个 type 的 input 元素file。确保你的表单标签有一个enctype属性并且它的值被设置为multipart/form-data

<form method="post" enctype="multipart/form-data"> 
    <div asp-validation-summary="All"></div>

    <input type="text" placeholder="Title" asp-for="Movie.Title"/>
    <input type="text" placeholder="Genre" asp-for="Movie.Genre" />
    <input type="text" placeholder="Price" asp-for="Movie.Price"/>
    <input type="file"  asp-for="Image"/>

    <button type="submit">Save</button>
</form>

现在在您的OnPost方法中，您可以读取Image页面模型的属性值并将其保存到磁盘。在 asp.net core 中，该wwwroot目录是一个特殊的目录，用于保存静态资产。因此，您可以将图像保留在其下方。我会创建一个名为uploadsinside的子目录wwwroot。

要获取wwwroot目录的路径，您可以使用IHostingEnvironment. 因此，将其注入您的页面模型类。

public class CreateModel : PageModel
{
     private readonly YourDbContext context;
     private readonly IHostingEnvironment hostingEnvironment;
     public CreateModel(YourDbContext context,IHostingEnvironment environment)
     {
        this.hostingEnvironment = environment;
        this.context=context;
     }
    //Your existing code for properties goes here
    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid)
            return Page();

        if (this.Image != null)
        {
            var fileName = GetUniqueName(this.Image.FileName); 
            var uploads = Path.Combine(hostingEnvironment.WebRootPath, "uploads");
            var filePath = Path.Combine(uploads,fileName);
            this.Image.CopyTo(new FileStream(filePath, FileMode.Create));
            this.Movie.ImageName = fileName; // Set the file name
        }
        context.Movie.Add(this.Movie);
        await context.SaveChangesAsync();
        return RedirectToPage("MovieList");
    }
    private string GetUniqueName(string fileName)
    {
        fileName = Path.GetFileName(fileName);
        return Path.GetFileNameWithoutExtension(fileName)
               + "_" + Guid.NewGuid().ToString().Substring(0, 4)
               + Path.GetExtension(fileName);
    }
}

这将保存文件wwwroot/uploads并将图像名称存储在我们正在保存ImageName的Movie记录的属性中。所以当你想显示图像时，读取记录，并使用该ImageName属性并创建 url。（例如： ' yourSiteName/uploads/aaa_9521.jpg，aaa_9521.jpg将来自您的电影记录ImageName属性值）

例如，在另一个页面中，您的页面模型具有一个实体Movies集合的属性Movie，您可以执行此操作

<table>    
    @foreach (Movie m in Model.Movies)
    {
        <tr>
            <td>@m.Title</td>
            <td>@m.Price</td>
            <td>
                <img src="~/uploads/@m.ImageName"/>
            </td>
        </tr>
    }
</table>