asp.net-mvc - 上传包含在 MVC 模型中的图像

标签 asp.net-mvc image post bytearray

我有以下模型:

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

}

我希望用户能够输入照片的详细信息,然后将模型发布到 Controller 。我的 Controller 操作如下:
[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>
}

View 显示正常,并允许用户从本地磁盘中选择文件并输入其他模型详细信息。
我的问题是,尽管模型已发布到 Controller 正常,但描述、日期和 IsActive 标志填充正常 - 图像数据为空。

谁能让我知道我需要更改什么,以便照片的字节数组包含在发布到 Controller 的模型中?

最佳答案

您 View 中输入的文件名称为 uploadImages .我在您的 View 模型中看不到具有此名称的属性。你好像有点ImageData属性是一个字节数组,但在您的 View 中似乎没有具有此名称的相应输入字段。

这解释了为什么你得到空值。您可以通过遵守约定来完成这项工作。例如,如果您打算在 View 中包含这样的输入字段:

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

然后确保您的 View 模型上有一个同名的属性。当然还有类型 HttpPostedFileBase .
public HttpPostedFileBase UploadImages { get; set; }

同样在您看来,请确保您设置了正确的内容类型 multipart/form-data :
@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    ...
}

您可能想要通过 following blog post 更好地熟悉 ASP.NET MVC 中文件上传工作的基础知识。我还写了一个 similar answer here 您可以咨询。

所以一旦你添加了 HttpPostedFileBaseUploadImages 的属性(property)在您的 View 模型中命名您可以调整您的 Controller 操作以读取字节数组并将其存储在您的 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);
}

现在请记住,这是一个绝对糟糕的解决方案。永远不要在现实世界的应用程序中这样做。在正确设计的应用程序中,您将拥有一个 View 模型,您的 Controller 操作将其作为参数。您永远不会直接使用自动生成的 EF 模型作为 Controller 操作的参数。您将拥有一个带有 HttpPostedFileBase 的 View 模型将映射到您的域模型的属性。

因此,在设计合理的应用程序中,您将拥有 PhotoViewModel您的 Controller 操作将采取的 View 模型类。

关于asp.net-mvc - 上传包含在 MVC 模型中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20446580/

相关文章:

php - Html Dropdown 提交表单并保留选项保留选项值

java - 通过 Http POST 请求从 Android 上传文件和其他数据

javascript - 如何取消 AJAX 长时间运行的 MVC 操作客户端(在 javascript 中)?

asp.net-mvc - 如何测试 Asp.Net MVC View 是否无异常(exception)地呈现?

c# - 如何在DataGridView中显示链接中的图像而不下载它

html - 我如何使用 MediaWiki 将图像的宽度缩放到窗口的百分比?

http - 使用 Grails 的简单 GET

Javascript 代码无法将我带到所需的 Controller MVC

asp.net-mvc - 对 ASP.Net MVC 授权的更多控制;保持 AJAX 请求 AJAX

ruby-on-rails - Ruby on Rails : Using Refile Gem, 显示图像而不裁剪或扭曲图像