Tải ảnh lên ứng dụng MVC 4

Question

Tôi đang cố tạo bộ điều khiển để tải ảnh lên ứng dụng MVC4 của mình. Nhưng tôi vẫn nhận được lỗi này. Dữ liệu nhập không phải là chuỗi Base-64 hợp lệ vì nó chứa ký tự 64 không phải là cơ sở, nhiều hơn hai ký tự đệm hoặc một ký tự khoảng trống trắng giữa các ký tự đệm.

PhotosController.cs

public class PhotoController : Controller 
    { 
     public ActionResult Index() 
     { 
      using (var ctx = new BlogContext()) 
      { 
       return View(ctx.Photos.AsEnumerable()); 
      } 
     } 

     public ActionResult Upload() 
     { 
      return View(new Photo()); 
     } 

     [HttpPost] 
     public ActionResult Upload(PhotoViewModel model) 
     { 
      var photo = Mapper.Map<PhotoViewModel, Photo>(model); 
      if (ModelState.IsValid) 
      { 
       PhotoRepository.Save(photo); 
       return RedirectToAction("Index"); 
      } 
      return View(photo); 
     } 
    } 

Photo.cs

public class Photo 
    { 
    public int Id { get; set; } 

    public Byte[] File { get; set; } 

    public string Name { get; set; } 

    public string Description { get; set; } 

    public string AlternateText { get; set; } 
    } 

PhotoViewModel.cs

public class PhotoViewModel 
    { 
     public int Id { get; set; } 

     public HttpPostedFileBase File { get; set; } 

     public string Name { get; set; } 

     public string Description { get; set; } 

     public string AlternateText { get; set; } 
    } 

/Photos/Upload.cshtml

@model Rubish.Models.Photo 

    @{ 
     ViewBag.Title = "Upload"; 
    } 

    <h2>Upload</h2> 

    @using (Html.BeginForm("Upload","Photo",FormMethod.Post,new {enctype="multipart/form-data"})) { 
     @Html.ValidationSummary(true) 

     <fieldset> 
      <legend>Photo</legend> 

      <div class="editor-label"> 
       @Html.LabelFor(model => model.Name) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.Name) 
       @Html.ValidationMessageFor(model => model.Name) 
      </div> 

      <div class="editor-label"> 
       @Html.LabelFor(model => model.Description) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.Description) 
       @Html.ValidationMessageFor(model => model.Description) 
      </div> 
      <div class="editor-label"> 
       <label for="file">FileName:</label> 
      </div> 
      <div class="editor-field"> 
       <input name="File" id="File" type="file"/> 
      </div> 
      <p> 
       <input type="submit" value="Create" /> 
      </p> 
     </fieldset> 
    } 

    <div> 
     @Html.ActionLink("Back to List", "Index") 
    </div> 

    @Scripts.Render("~/bundles/jqueryval") 

PhotoRepository

public class PhotoRepository 
    { 
     private static BlogContext _ctx; 

     public PhotoRepository() 
     { 
      _ctx = new BlogContext(); 
     } 

     public static void Save(Photo p) 
     { 
      _ctx.Photos.Add(p); 
      _ctx.SaveChanges(); 
     } 
    } 

Answer 1

Vấn đề là bạn có một tài sản trong mô hình quan điểm của bạn được gọi File đó là loại byte[] và bạn cũng đang sử dụng một tham số hành động được gọi file loại HttpPostedFileBase. Vấn đề là khi mô hình kết nối gặp một thuộc tính trên mô hình của bạn loại byte[] nó cố gắng để ràng buộc giá trị của nó từ giá trị yêu cầu bằng cách sử dụng base64. Ngoại trừ bên trong yêu cầu bạn có giá trị được mã hóa multipart/form-data của tệp được tải lên và bạn sẽ nhận được một ngoại lệ.

Cách đúng để khắc phục điều này là sử dụng xem các mô hình thay vì đi qua mô hình tên miền của bạn với quan điểm:

public class PhotoViewModel 
{ 
    public HttpPostedFileBase File { get; set; } 

    ... other properties 
} 

và hành động điều khiển bây giờ sẽ trở thành:

[HttpPost] 
public ActionResult Upload(PhotoViewModel model) 
{ 
    if (ModelState.IsValid) 
    { 
     // map the domain model from the view model that the action 
     // now takes as parameter 
     // I would recommend you AutoMapper for that purpose 
     Photo photo = ... 

     // Pass the domain model to a DAL layer for processing 
     Repository.Save(photo); 

     return RedirectToAction("Index"); 
    } 
    return View(photo); 
} 

Cách nghèo và hoàn toàn không được tôi khuyên dùng là đổi tên đầu vào tệp của bạn để lừa mô hình liên kết:

<input name="PhotoFile" id="File" type="file"/> 

và hành động điều khiển của bạn:

[HttpPost] 
public ActionResult Upload(Photo photo, HttpPostedFileBase photoFile) 
{ 
    ... 
}