Asp.net mvc 如何在MVC5中将图像保存在数据库中并显示到视图中？_Asp.net Mvc

Asp.net mvc 如何在MVC5中将图像保存在数据库中并显示到视图中？

asp.net-mvc

Asp.net mvc 如何在MVC5中将图像保存在数据库中并显示到视图中？,asp.net-mvc,Asp.net Mvc,我有一张像下面这样的桌子 CREATE TABLE [dbo].[Movies] ( [fname] NVARCHAR(50) NULL, [lname] NVARCHAR(50) NULL, [MoviePoster] VARCHAR (50) NULL, 如何将图像保存到电影海报字段以及如何查看它 [MoviePoster] [varbinary](max) NULL --您必须将图像作为BLOB插入 --插入blob脚本： INSERT INTO [Movies](M

我有一张像下面这样的桌子

CREATE TABLE [dbo].[Movies] (
[fname] NVARCHAR(50) NULL, 
[lname] NVARCHAR(50) NULL,
[MoviePoster] VARCHAR (50)  NULL,

如何将图像保存到电影海报字段以及如何查看它

  [MoviePoster]      [varbinary](max) NULL

--您必须将图像作为BLOB插入 --插入blob脚本：

INSERT INTO [Movies](MoviePoster) 
VALUES (SELECT * FROM OPENROWSET (BULK 'your img url', SINGLE_BLOB))

--在视图中显示图像：

<img src='data:image/jpeg;base64, <--data from db-->' />

”/>

在服务器上保存电影海报怎么样

/content/images/movieposters/thearrival.jpg

并在

MoviePoster

字段中仅存储文件名

thearrival.jpg

我个人更喜欢这种方法，因为如果假设您的数据库将增长，您将有更多的访问者……那么，您将能够将所有电影海报移动到不同的服务器，并从应用服务器释放大量负载

在解决方案资源管理器中创建“图像”文件夹

创建ADO.NET实体数据模型（本例中为“Database1Entities”）

家庭控制器

  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.MoviePoster = ImageName;
    db.tblAs.Add(newRecord);
    db.SaveChanges();

}
//Display records
return RedirectToAction("../home/Display/");
}

public ActionResult Display()
{
  return View();
 }
 }
 }

索引视图

@{
 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>    
}

@{
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>
}

@{
ViewBag.Title=“Index”；
}
@使用（Html.BeginForm（“FileUpload”、“Home”、FormMethod.Post、，
新的{enctype=“multipart/form data”}）
{
名字

@Html.TextBox（“fname”）

姓氏

@Html.TextBox（“lname”）

图像



}

显示视图

@{
 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>    
}

@{
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>
}

@{
ViewBag.Title=“显示”；
}
@{
test2.Database1Entities db=newtest2.Database1Entities（）；
}
@使用（Html.BeginForm（））
{
形象
名字
姓
@foreach（数据库tblAs中的变量项）
{
@item.fname
@item.lname
}
}

输出将是一个表，其中包含从数据库中查看的图像

索引
  [HttpPost]
    public ActionResult AddEmployee(HttpPostedFileBase file)
       {   
       using(DbEntities DB = new DbEntities())
         { 
            TblImage tblimg=new TblImage();
            if (file != null)
            {
                var fileName = Path.GetFileName(file.FileName);
                file.SaveAs(Server.MapPath("~/Data/EmployeeProfileImage/" + fileName));    
                tblimg.image = "~/Data/EmployeeProfileImage/" + fileName;

            }
          DB.TblImages.Add(tblimg);
          DB.SaveChanges(); 
        }

        return View();
    }

@{
ViewBag.Title=“Index”；
}
表，th，td{
边框：1px纯灰；
边界塌陷：塌陷；
填充物：5px；
}
表tr：第n个子项（奇数）{
背景色：#f1f1；
}
表tr：第n个子项（偶数）{
背景色：#ffffff；
}
指数
@使用（Html.BeginForm（“Index”，“Candidate”），FormMethod.Post，
新的{enctype=“multipart/form data”}）
{ 
候选人
@*身份证*@
名称
二值图像


地址
路径图像
职位简介
电子邮件
电话号码。
}
@Html.Partial（“~/Views/Candidate/detail.cshtml”）
细节
@*@型号列表*@
@使用angularmvcdemo.模型；
表，th，td{
边框：1px纯灰；
边界塌陷：塌陷；
填充物：5px；
}
表tr：第n个子项（奇数）{
背景色：#f1f1；
}
表tr：第n个子项（偶数）{
背景色：#ffffff；
}
@{
modeldataEntities db=新的modeldataEntities（）；
//angularmvcdemo.modeldataEntities db=新的angularmvcdemo.modeldataEntities（）；
}
候选人
@foreach（变量详细信息，以db.CandidatedDetails为单位）{
Name@detail.Name
@**@ 
二值图像
@if（detail.BinaryPhoto！=null）
{var base64=Convert.ToBase64String（detail.BinaryPhoto）；
var imgsrc=string.Format（“数据：image/jpg；base64，{0}”，base64）；
}
else{}
地址@detail.Address
路径图像
@如果（@detail.PathPhoto！=null）{
}else{}
JobProfile@detail.JobProfile 
Email@detail.Email
电话号码。
@detail.phone实际上，你也可以将图像存储在Db上。如果你不想，你不需要将其作为文件保存在服务器上（如果你有很多电影，这将是一个管理问题）
如果您使用的是SQL Server，则有一个“映像”数据类型。如果您使用的是MySql，则应使用BLOB
我正在使用MVC，因此：
模型（部分代码）（在SqlServer中，您将声明映像，而在模型中，类型将为byte[]：
public byte[] PersonImage { get; set; }

在同一个模型中，您需要一个方法来检索路径：
public string GetPicture()
    {
        if (PersonImage == null)
        {
            return null;
        }

        var base64Image = System.Convert.ToBase64String(PersonImage);
        return $"data:{ImageContentType};base64,{base64Image}";
    }

控制器内的创建操作（操作声明将需要接收一个IFormFile PersonImage），在我的情况下，我正在处理控制器注册操作上的图像上载（为了更简洁，一些控制器代码已删除）：
公共异步任务注册表（RegisterViewModel模型、客户端客户端、员工、个人、IFormFile PersonImage、字符串returnUrl=null）
if（PersonImage！=null）
{
使用（var stream=new MemoryStream（））
{
等待PersonImage.CopyToAsync（流）；
person.PersonImage=stream.ToArray（）；
person.ImageContentType=PersonImageContentType；
}
}
_上下文。添加（人）；
wait_context.SaveChangesAsync（）；

现在在视图中，您需要将enctype添加到表单中：
<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
        <form asp-route-returnUrl="@ViewData["ReturnUrl"]" method="post" enctype="multipart/form-data">
            <h2 class="text-center font-weight-bold">Create a new account.</h2>
            <hr />
            <div asp-validation-summary="All" class="text-danger"></div>

            <div class="form-group">
                <label asp-for="@person.PersonImage" class="control-label"></label>
                <input type="file" asp-for="@person.PersonImage" class="form-control" />
                <span asp-validation-for="@person.PersonImage" class="text-danger"></span>
            </div>


            <button type="submit" class="btn btn-default">Register</button>
        </form>
    </div>
    <div class="col-md-4"></div>
</div>


创建一个新帐户。

登记

同样，为了得到一个更好、更简洁的示例，我去掉了大部分代码。当我试图将一些图像放到数据库中时，我很难找到这一点。
您可能会在和上看到我关于这个问题的答案。