ASP.netコアに画像を追加する

Question

モデルクラスの一部として画像を追加して、インデックスビューに表示したかったのです。私は画像をバイト[]またはiFormFileとして分類するのに問題があります。

これは私が従業員を一覧表示し、同様にその画像を見ることができ、インデックスページで従業員

のリストを挿入するページを作成します

1. を達成しようとしているものです。

ここはモデルです。

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（従業員）"に問題があります。私はiformfileを追加できないと言います。私は他の分野には何の問題もありません。

Employee.Imageをバイト配列に変更しようとしました。しかし、私はこの情報をcreate関数に渡すために私のビューを構造化する方法を混同しています。

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