将图像添加到 ASP.net core

Question

我想添加图像作为模型类的一部分并将其显示在索引视图上。我在将图像分类为 byte[] 或 iFormFile 时遇到问题。

这就是我想要实现的目标

1. 创建一个页面来插入员工列表

2. 在索引页面中，能够列出员工并查看他们的图像。

这是模型。

员工.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);
    }

创建.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 更改为字节数组。但是，我很困惑如何构造我的视图以将此信息传递给创建函数。

Answer 1

就像 ar27111994 建议的那样，我存储图像名称和扩展名。图像保存在 wwwroot 中的某个位置。

这是变化

员工.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; }
}

创建.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);
    }