包括在MVC模式上载图片 [英] Upload image included in MVC model

问题描述

我有以下型号：

public class Photo
{
    public int PhotoId { get; set; }
    public byte[] ImageData { get; set; }
    public DateTime DateUploaded { get; set; }
    public string Description { get; set; }
    public bool IsActive { get; set; }

}

我希望用户能够进入细节的照片，然后上传模型中的控制器。我控制器操作如下：

I would like the user to be able to enter the details for the photo then post the model the the controller. My controller action is as follows:

[HttpPost]
    public ActionResult Create(WilhanWebsite.DomainClasses.Photo photo)
    {
        if (ModelState.IsValid)
        {
            photo.DateUploaded = DateTime.Now;
            _context.Photos.Add(photo);
            _context.SaveChanges();

            return RedirectToAction("Index");
        }
        //we only get here if there was a problem
        return View(photo);
    }

我的看法如下：

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Photo</h4>
    <hr />
    @Html.ValidationSummary(true)

    <div class="form-group">
        @Html.LabelFor(model => model.ImageData, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <input type="file" name="uploadImages" class="input-files" />
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.DateUploaded, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DateUploaded)
            @Html.ValidationMessageFor(model => model.DateUploaded)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.IsActive, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.IsActive)
            @Html.ValidationMessageFor(model => model.IsActive)
        </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>
</div>
}

该视图显示确定，并允许用户选择从本地磁盘上的文件，然后输入其他模型的细节。
我的问题是，虽然模型发布到控制器确定，描述，日期和IsActive标志被填充正常 - 图像数据为空

The view is displayed ok and allows the user to select a file from their local disk and enter the other model details. My problem is that although the model is posted to the controller ok, the Description, Date and IsActive flags are populated ok - the Image data is null.

任何人都可以请让我知道我需要改变，这样的照片的字节数组包含在发布到控制器的型号？

Could anyone please let me know what I need to change so that the byte array for the photo is included in the model posted to the controller?

推荐答案

在您查看文件输入有一个名字 uploadImages 。我看不出这个名字在你的视图模型的属性。你似乎有一些的ImageData 属性，它是一个字节数组，但似乎没有要与此名称在视图中的相应的输入字段。

The file input in your view has a name uploadImages. I can't see a property with this name in your view model. You seem to have some ImageData property which is a byte array, but there doesn't seem to be a corresponding input field with this name in your view.

这就是为什么你会得到空。您可以通过尊重该公约，使这项工作。因此，例如，如果你打算在你认为，这种输入字段：

This explains why you get null. You could make this work by respecting the convention. So for example if you intend to have such an input field in your view:

<input type="file" name="uploadImages" class="input-files" />

然后确保你有相同名称的视图模型的属性。和类型的课程 HttpPostedFileBase 。

public HttpPostedFileBase UploadImages { get; set; }

另外，在您的视图确保您设置的multipart / form-data的的正确内容类型：

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

您或许可能要经过 下面的博客文章 以更好地与上传文件在ASP.NET MVC是如何工作的基本知识熟悉。我也写了<一个href=\"http://stackoverflow.com/questions/5193842/file-upload-asp-net-mvc-3-0/5193851#5193851\"><$c$c>similar回答此处 ，你可能会参考。

You probably might want to go through the following blog post to better familiarize yourself with the basics of how uploading of files work in ASP.NET MVC. I've also written a similar answer here that you might consult.

因此​​，一旦你在你的视图模型添加具有 UploadImages 名称 HttpPostedFileBase 属性，你可以调整你的控制器动作读取字节数组并将其存储你的的ImageData 属性：

So once you add the HttpPostedFileBase property with the UploadImages name in your view model you could adapt your controller action to read the byte array and store it your ImageData property:

[HttpPost]
public ActionResult Create(WilhanWebsite.DomainClasses.Photo photo)
{
    if (ModelState.IsValid)
    {
        photo.DateUploaded = DateTime.Now;
        photo.ImageData = new byte[photo.UploadImages.ContentLength];
        photo.UploadImages.Read(photo.ImageData, 0, photo.ImageData.Length);

        _context.Photos.Add(photo);
        _context.SaveChanges();

        return RedirectToAction("Index");
    }

    //we only get here if there was a problem
    return View(photo);
}

现在记住，这是一个可怕的绝对解决方案。永远不要在一个真实的世界的应用程序。在正确设计的应用程序，你将有你的控制器动作将作为参数视图模型。你永远都不会直接使用自动生成的EF模型参数到控制器的动作。你将不得不与将被映射到您的域模型中的 HttpPostedFileBase 属性视图模型。

Now bear in mind that this is an absolutely awful solution. Never do that in a real world application. In a correctly designed application you will have a view model that your controller action will take as a parameter. You're never gonna directly use your autogenerated EF model as parameter to your controller action. You will have a view model with the HttpPostedFileBase property which will be mapped to your domain model.

因此​​，在设计合理的应用程序，你将有你的控制器操作将采取 PhotoViewModel 视图模型类。

So in a properly designed application you will have a PhotoViewModel view model class that your controller action will take.

这篇关于包括在MVC模式上载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！