asp.net-mvc - 将照片上传到 MVC 4 应用程序

Question

我正在尝试创建一个 Controller 来在我的 MVC4 应用程序中上传照片。但我不断收到此错误。输入不是有效的 Base-64 字符串，因为它包含非 Base-64 字符、两个以上的填充字符或填充字符中包含非空格字符。

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

照片.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; }
    }

/照片/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")

照片库

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

问题是您的 View 模型中有一个名为 File 的属性，其类型为 byte[] 并且您还使用了名为 的操作参数HttpPostedFileBase 类型的文件。问题是，当模型绑定(bind)器在模型上遇到 byte[] 类型的属性时，它会尝试使用 base64 从请求值绑定(bind)其值。只不过在请求中您有一个上传文件的 multipart/form-data 编码值，并且您会收到异常。

解决此问题的正确方法是使用 View 模型，而不是将域模型传递给 View :

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

    ... other properties
}

Controller 操作现在将变为:

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

我完全不推荐的糟糕方法是重命名文件输入来欺骗模型绑定(bind)器:

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

以及您的 Controller 操作:

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