在ASP.net core中添加图片

Question

我希望添加一个图像到模型类中，并在索引视图中显示它。我无法确定将图像分类为byte[]还是iFormFile。

这是我的目标：

1. 创建一个页面来插入员工列表。 2. 在索引页面上，能够列出员工并查看他们的图像。

以下是模型类：

Employee.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;

namespace MvcMovie.Models
{
  public class Employee
  {
    public int ID { get; set; }
    [Required]
    public string FirstName { get; set; }
    [Required]
    public string LastName { get; set; }
    [Required]
    public string Nationality { get; set; }
    [Required]
    public string NRIC { get; set; }
    [Required]
    public string StaffID { get; set; }
    [Required]
    public int AccessRights { get; set; }
    [Required]
    public DateTime DOB { get; set; }

    [Required(ErrorMessage = "Please Upload a Valid Image File. Only jpg format allowed")]
    [DataType(DataType.Upload)]
    [Display(Name = "Upload Product Image")]
    [FileExtensions(Extensions = "jpg")]
    public IFormFile Image { get; set; }

    public string ImageName { get; set; }
  }
}

这是生成错误的控制器代码部分。

EmployeeController.cs

[HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create(Employee employee, IFormFile    Image) 
    {
        if (ModelState.IsValid)
        {

            if (Image != null && Image.Length > 0)
            {

                var file = Image;
                var uploads = Path.Combine(_environment.WebRootPath, "uploads\\img\\employees");

                if (file.Length > 0)
                {
                    var fileName = ContentDispositionHeaderValue.Parse
                        (file.ContentDisposition).FileName.Trim('"');

                    System.Console.WriteLine(fileName);
                    using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))
                    {
                        await file.CopyToAsync(fileStream);
                        employee.ImageName = Path.Combine(uploads, file.FileName);
                    }

                    var imageUrl = Path.Combine(uploads + file.FileName);

                }
            }

            _context.Add(employee);
            await _context.SaveChangesAsync();
            return RedirectToAction("Index");

        }
        else
        {
            var errors = ModelState.Values.SelectMany(v => v.Errors);
        }
        return View(employee);
    }

Create.cshtml

<form asp-action="Create" enctype="multipart/form-data" asp-antiforgery="true"  method="post">
 <div>
      ...

      <div class="form-group">
          <label asp-for="Image" class="control-label col-md-2"></label>
          <div class="col-md-10">
               <input asp-for="Image" class="form-control" />
               <span  class="text-danger"></span>
          </div>
      </div>
      <div class="form-group">
          <div class="col-md-offset-2 col-md-10">
          <input type="submit" value="Create" class="btn btn-default" />
      </div>
  </div>
</form>

我成功将图片上传到了正确的文件夹。但是，关于“_context.Add(employee)”这个语句，我遇到了问题。它说我不能添加一个IFormFile类型的数据。对于其他字段，我没有任何问题。

我尝试将Employee.Image更改为字节数组。然而，我不知道如何构建我的视图来传递这些信息给创建函数。

- Kah Wai Lee

---

我建议您不要将文件上传到数据库中，而是仅上传其路径。 - ar27111994

我打算创建一个Web应用程序，允许用户将文件上传到服务器。你的意思是我应该创建我的模型类仅包含字符串。并在控制器、视图和cshtml文件中分别处理它们吗？ - Kah Wai Lee

你好 ar27111994，我已相应地更新了模型。然而，我在更新数据库时遇到了一些问题。请参见这里。 似乎我所做的是正确的，但是无法更新数据库。我对ASP.net和C#都很陌生，因此对迁移工作的运作方式感到困惑。 - Kah Wai Lee

请在微软虚拟学院网站上观看ASP.NET Core教程，并避免在此论坛上发布无关或重复的问题。显然，您需要了解ASP.NET中的Web开发有关的许多知识。谢谢。 - ar27111994

是的。我对ASP.net、C#和Web开发都很新。关于数据库问题，这是一个迁移问题。删除所有迁移，创建一个新的迁移，并根据需要更改SQL语句即可解决问题。谢谢。 - Kah Wai Lee

Answer 1

像ar27111994建议的那样，我只存储图像的名称和扩展名。该图像保存在wwwroot文件夹中。

这是更改内容：

Employee.cs

public class Employee
{
    [Key]
    public int ID { get; set; }
    [Required]
    public string FirstName { get; set; }
    [Required]
    public string LastName { get; set; }
    [Required]
    public string Nationality { get; set; }
    [Required]
    public string NRIC { get; set; }
    [Required]
    public string StaffIdentity { get; set; }
    [Required]
    public int AccessRights { get; set; }
    [Required]
    public DateTime DOB { get; set; }

    public string ImageName { get; set; }
}

create.cshtml

<div class="form-group">
     <label class="col-md-2 control-label">Employee Image</label>
     <div class="col-md-10">
          <input  class="form-control"  type="file" name="pic" accept="image/*"/>             
     </div>
</div>
<div class="form-group">
     <div class="col-md-offset-2 col-md-10">
          <input type="submit" value="Create" class="btn btn-default" />
     </div>
</div>

EmployeeController.cs

[HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create([Bind("ID,AccessRights,DOB,FirstName,LastName,NRIC,Nationality,StaffIdentity")]Employee employee) 
    {
        if (ModelState.IsValid)
        {
            var files = HttpContext.Request.Form.Files;
            foreach (var Image in files)
            {
                if (Image != null && Image.Length > 0)
                {

                    var file = Image;
                    var uploads = Path.Combine(_environment.WebRootPath, "uploads\\img\\employees");

                    if (file.Length > 0)
                    {
                        var fileName = ContentDispositionHeaderValue.Parse
                            (file.ContentDisposition).FileName.Trim('"');

                        System.Console.WriteLine(fileName);
                        using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))
                        {
                            await file.CopyToAsync(fileStream);
                            employee.ImageName = file.FileName;
                        }


                    }
                }
            }

            _context.Add(employee);
            await _context.SaveChangesAsync();
            return RedirectToAction("Index");

        }
        else
        {
            var errors = ModelState.Values.SelectMany(v => v.Errors);
        }
        return View(employee);
    }

- Kah Wai Lee

---

为什么 var files = HttpContext.Request.Form.Files; 只返回 name=files[] 的最后一个文件？ - JoshYates1980