如何在数据库中保存图像并将其显示在MVC 4中的视图中？

Question

我有一张像以下一样的表格:

CREATE TABLE [dbo].[tblA]
(
    [Id] INT NOT NULL PRIMARY KEY IDENTITY, 
    [fname] NVARCHAR(50) NULL, 
    [lname] NVARCHAR(50) NULL, 
    [imageUrl] NVARCHAR(50) NULL
)

我想用文件上传来上传文件.如何在数据库中保存图像并将其显示到视图中？

Answer 1

1. 在解决方案资源管理器中创建"图像"文件夹.
2. 创建ADO.NET实体数据模型(在此示例中为"Database1Entities")

3. 家庭控制器:

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Mvc;
   
   namespace test2.Controllers
   {
   public class HomeController : Controller
   {
   public ActionResult Index()
   {
       return View();
   }
   
   public ActionResult FileUpload(HttpPostedFileBase file)
   {
   
       if (file != null)
       {
           Database1Entities db = new Database1Entities();
           string ImageName = System.IO.Path.GetFileName(file.FileName);
           string physicalPath =Server.MapPath("~/images/"+ ImageName);
   
           // save image in folder
           file.SaveAs(physicalPath);
   
           //save new record in database
           tblA newRecord = new tblA();
           newRecord.fname = Request.Form["fname"];
           newRecord.lname = Request.Form["lname"];
           newRecord.imageUrl = ImageName;
           db.tblAs.Add(newRecord);
           db.SaveChanges();
   
       }
       //Display records
       return RedirectToAction("../home/Display/");
   }
   
   public ActionResult Display()
   {
       return View();
   }
   }
   }
   

4. 索引视图

   @{
      ViewBag.Title = "Index";
   }
   
   @using (Html.BeginForm("FileUpload", "Home", FormMethod.Post,
                       new { enctype = "multipart/form-data" }))
   {
   <div>
   First name<br />
   @Html.TextBox("fname") <br />
   Last name<br />
   @Html.TextBox("lname") <br />
   Image<br />
   <input type="file" name="file" id="file" style="width: 100%;" /> <br />
   <input type="submit" value="Upload" class="submit" />
   </div>    
   }
   

5. 显示视图

   @{
       ViewBag.Title = "Display";
   }
   
   @{
      test2.Database1Entities db = new test2.Database1Entities();
   }
   @using (Html.BeginForm())
   {
   <table border="1">
   <thead>
       <tr>
           <th>Image</th>
           <th>First name</th>
           <th>Last name</th>
       </tr>
   </thead>
   <tbody>
       @foreach (var item in db.tblAs)
       {
           <tr>
               <td><img src="~/images/@item.imageUrl" width="100" height="100" /></td>
               <td>@item.fname</td>
               <td>@item.lname</td>
           </tr>
       }
   </tbody>
   </table>
   }
   

输出:

/家/

/家庭/显示/