ASP.net 코어에 이미지 추가

Question

이미지를 모델 클래스의 일부로 추가하고 인덱스 뷰에 표시하려고합니다. 이미지를 바이트 [] 또는 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); 
    } 

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

Create.cshtml

나는 올바른 폴더에 이미지를 업로드 할 수 있었다. 그러나 "_context.Add (employee)"문에 문제가 있습니다. iformfile을 추가 할 수 없다고합니다. 다른 분야에는 문제가 없습니다.

Employee.Image를 바이트 배열로 변경해 보았습니다. 그러나 필자는이 정보를 작성 함수에 전달하기 위해 내 뷰를 구조화하는 방법을 혼동합니다.

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