如何使用带有实体框架的 ASP.net MVC4 上传/显示图像答案

【问题标题】：How to upload/display images using ASP.net MVC4 with Entity Framework如何使用带有实体框架的 ASP.net MVC4 上传/显示图像
【发布时间】：2013-03-17 17:38:13
【问题描述】：

我有一个像这样的数据模型

    public class NewsItem
{
    public virtual int Id { get; set; }
    public virtual string NewsTitle { get; set; }
    public virtual string NewsContent { get; set; }
    public virtual byte[] NewsImage { get; set; }
    public virtual DateTime DateAdded { get; set; }
    public virtual bool IsLive { get; set; }
}

然后我通过这样的视图显示这些数据：

@model BusinessObject.Domain.NewsItem
<div class="row-fluid">
    <h3>
        @Html.ValueFor(model => model.NewsTitle)
    </h3>
    <div class="span5">
    <img src="~/Content/images/stock.jpg" />
    </div>

<div class="span7">
<p>
    @Html.ValueFor(model => model.DateAdded)
</p>
<p>
    @Html.ValueFor(model => model.NewsContent)
</p>
</div>
 </div>

然后我使用控制器中的 _db.SaveChanges() 保存数据，如下所示：

[Authorize]
    [HttpPost]
    public ActionResult Create(CreateNewsViewModel input)
    {
        if (ModelState.IsValid)
        {
            var news = new NewsItem();
            news.NewsTitle = input.nTitle;
            news.NewsContent = input.nContent;
            news.DateAdded = input.nDateAdded;
            news.IsLive = input.nIsLive;
            Mydb data = new Mydb();
            data.NewsItems.Add(news);
            data.SaveChanges();
            return View("Index", data.NewsItems);

        }
        else
        {
            return View(input);
        }
    }

目前我没有图片上传位。我该怎么办？在我的数据库中，我有一个二进制字段，我的对象中的数据类型是字节 []。但是我不知道我需要在哪里处理图片上传？

我是否需要一个单独的操作来返回视图？在这方面的一些指示将是伟大的。

干杯

【问题讨论】：

标签： c# asp.net-mvc image

【解决方案1】：

您需要从视图上传一个文件类型的输入字段，并需要一个 WebImage 的实例来处理上传的图像：

查看：

<input type="file" name="image" />

控制器：

WebImage image = WebImage.GetImageFromRequest();
byte[] toPutInDb = WebImage.GetBytes();

// ... put the byte array into the database

要显示数据库中的图像，您需要一个控制器 Action，它从数据库中检索字节数组并返回 FileAction。您可以通过在您从数据库中检索的字节数组上实例化另一个 WebImage 实例来获取此图像（用于图像检索控制器操作）：

WebImage image = new WebImage(byteArrayFromDb);

File(image.GetBytes(), "image/" + image.ImageFormat, image.FileName);

【讨论】：

您可能需要将byte[] toPutInDb = WebImage.GetBytes(); 更改为byte[] toPutInDb = image.GetBytes();
因此，如果我在我的控制器中的 httppost 操作中执行 WebImage 内容，然后将该字段设置为 byte[] 值，那么这将在 data.SaveChanges() 上提交。听起来不错。我稍后会试一试。谢谢大家的回复。
我的 WebImage.GetImageFromRequest 总是返回 null。有什么想法吗？
忽略这个，我需要在我的 Html.BeginForm 上使用重载 @@using (Html.BeginForm("Create", "ManageNews", FormMethod.Post, new { @@encType = "multipart /form-data" }))

【解决方案2】：

看看jquery file uploader 你可以找sample code给它

希望对你有帮助

【讨论】：

【解决方案3】：

我会这样：

在您的模型类中：

 public class NewsItem
{
    public virtual int Id { get; set; }
    public virtual string NewsTitle { get; set; }
    public virtual string NewsContent { get; set; }
    public virtual string NewsImage { get; set; } //string instead of byte because you don't wanna store your whole image file in your database, but just the path of the image, and the image you will store in a folder somewhere on the server
    public virtual DateTime DateAdded { get; set; }
    public virtual bool IsLive { get; set; }
}

在您的控制器中：

[Authorize]
    [HttpPost]
    public ActionResult Create(CreateNewsViewModel HttpPostedFileBase file)// add this 
    {
        if (ModelState.IsValid)
        {
            if (file != null)
            {
                file.SaveAs(HttpContext.Server.MapPath("~/Images/") + file.FileName);
                car.ImagePath = file.FileName;
            }
        // the rest of the code... 

        }
        else
        {
            return View(input);
        }
    }

那么在你看来你应该有：

上传：

<input id="NewsImage" title="Upload a image" type="file" name="file" />

为了在foreach循环中显示添加：

@Html.DisplayFor(modelItem => item.NewsImage)

不要忘记在Html.BeginForm 中添加enctype = "multipart/form-data"

我希望这会有所帮助。

【讨论】：