Hinzufügen von Bildern zu ASP.net Core

Question

Ich wollte ein Bild als Teil der Modellklasse hinzufügen und es in der Indexansicht anzeigen. Ich habe Probleme, das Bild entweder als Byte [] oder als iFormFile zu klassifizieren.

Das ist, was ich versuche, eine Seite zu erreichen

1. Erstellen Sie eine Liste der Mitarbeiter

2. In der Index-Seite, in der Lage setzen Sie die Mitarbeiter auflisten und auch ihre Bilder sehen .

Hier ist das Modell.

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; } 
    } 
} 

Dies ist der Abschnitt des Codes der Steuerung, die den Fehler erzeugt.

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> 

konnte ich das Bild in den richtigen Ordner hochzuladen. Ich habe jedoch ein Problem mit der Aussage "_context.Add (Mitarbeiter)". Es besagt, dass ich keine iformfile hinzufügen konnte. Ich habe kein Problem mit den anderen Feldern.

Ich habe versucht, Employee.Image zu einem Byte-Array zu ändern. Ich bin jedoch verwirrt, wie ich meine Ansicht strukturiere, um diese Information an die create-Funktion zu übergeben.

Answer 1

Wie was ar27111994 vorgeschlagen, speichern Sie den Bildnamen und die Erweiterung stattdessen. Das Bild wird irgendwo in wwwroot gespeichert.

Hier ist die Änderung

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); 
    }