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

时间:2017-02-27 11:13:45

标签: asp.net-mvc

我有一个如下表

{{ _self.renderJob(fields) }}

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

6 个答案:

答案 0 :(得分:1)

  [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-->' />

答案 1 :(得分:1)

如何在服务器上保存电影海报,请说:

/content/images/movieposters/thearrival.jpg

并在MoviePoster字段中仅存储文件名thearrival.jpg

我个人更喜欢这种方法,因为如果让我们说你的数据库会增长,你会有更多的访问者......那么,你就可以把你所有的电影海报都移到另一台服务器上,并且可以节省很多来自应用程序服务器的负载。

答案 2 :(得分:0)

  1. 创建&#34;图像&#34;解决方案资源管理器中的文件夹。
  2. 创建ADO.NET实体数据模型(在此示例中为&#34; Database1Entities&#34;)
  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.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>    
    }
    

    <强> DisplayView

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

    OutPut将是一张包含数据库中已查看图像的表格

答案 3 :(得分:0)

  [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();
    }

答案 4 :(得分:0)

INDEX


@{
    ViewBag.Title = "Index";
}


<link href="~/bootstrapp/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/bootstrapp/js/bootstrap.min.js"></script>
<style>
    table, th, td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
    }

        table tr:nth-child(odd) {
            background-color: #f1f1f1;
        }

        table tr:nth-child(even) {
            background-color: #ffffff;
        }
</style>

<h2>Index</h2>
@using (Html.BeginForm("Index", "Candidate", FormMethod.Post,
                    new { enctype = "multipart/form-data" }))
{ 
<div class="container">    
    <table>
        <tr><td colspan="2" style="width:800px;height:50px">candidate</td></tr>
        <tr><td>@*<label>Id</label><input type="number" name="candidateID" />*@</td></tr>
           <tr>           
            <td style ="width:10px;height:10px">                
                <label>Name</label>    <input type="text" name="Name" />
            </td>
            <td style="width:80px;height:50px"><label>Binary Image</label>
                <input type="file" name="file1" id="file1" style="width: 100%;" /> <br />       
            </td>
        </tr>
        <tr>
            <td>
                <label>Address</label> <input type="text" name="address" />
            </td>
            <td>
                <label>Path Image</label> <input type="file" name="file2" id="file2" style="width: 100%;" /> 
            </td>
        </tr>
        <tr>
            <td>
                <label>JobProfile</label>   <input type="text" name="JobProfile" />
            </td>
            <td>
                <label>Email</label>  <input type="text" name="email" />
            </td>
        </tr>
        <tr><td>
    <label>Phone No.</label> <input type="number" name="phone" />
</td><td ><input type="submit" value="Submit"/></td></tr>
    </table>
    </div>
}
@Html.Partial("~/Views/Candidate/detail.cshtml")



DETAIL



@*@model List< angularmvcdemo.CandidateDetail>*@
@using angularmvcdemo.Models;



<link href="~/bootstrapp/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/bootstrapp/js/bootstrap.min.js"></script>
<style>
    table, th, td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
    }

        table tr:nth-child(odd) {
            background-color: #f1f1f1;
        }

        table tr:nth-child(even) {
            background-color: #ffffff;
        }
</style>

@{
    modeldataEntities db = new modeldataEntities();
    //angularmvcdemo.modeldataEntities db = new angularmvcdemo.modeldataEntities();


}
<table>
    <tr><td colspan="2" style="width:800px;height:50px">candidate</td></tr>
    @foreach(var detail in db.CandidateDetails){   
    <tr>
        <td style="width:10px;height:10px">
            <label>Name</label>@detail.Name
            @*<input type="text" name="Name" />*@ </td>
        <td> binary image
            @if (detail.BinaryPhoto != null)
            { var base64 = Convert.ToBase64String(detail.BinaryPhoto);
        var imgsrc = string.Format("data:image/jpg;base64,{0}", base64);
<img src='@imgsrc' style="max-width:100px;max-height:100px" />
            }
            else { <img src="~/img/avatar-default.jpg" style="max-width:100px;max-height:100px" />   }        </td>        
    </tr>
    <tr>
        <td>
            <label>Address</label>     @detail.address       </td>
        <td><label>path image</label>
            @if(@detail.PathPhoto!=null){        <img src="@detail.PathPhoto" width="100" height="100" />
            }else{ <img src="~/img/avatar-default.jpg" style="max-width:100px;max-height:100px" />           }       </td>
    </tr>
    <tr>
        <td>
            <label>JobProfile</label>@detail.JobProfile </td>
        <td>
            <label>Email</label>          @detail.email </td>
    </tr>
        <tr><td></td><td><label>Phone No.</label>
@detail.phone</td><</tr>
    }
</table>

答案 5 :(得分:0)

实际上,您也可以将图像存储在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}";
    }

控制器内部的create动作(动作声明将需要接收一个IFormFile PersonImage),就我而言,我正在处理控制器的register动作上的图像上载(某些控制器代码已被删除为更加简洁):

 public async Task<IActionResult> Register(RegisterViewModel model, Client client, Employee employee, Person person, IFormFile PersonImage, string returnUrl = null)

 if (PersonImage != null)
            {
                using (var stream = new MemoryStream())
                {
                    await PersonImage.CopyToAsync(stream);
                    person.PersonImage = stream.ToArray();
                    person.ImageContentType = PersonImage.ContentType;
                }
            }
 _context.Add(person);
 await _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>

同样,我摘掉了大部分代码,以得到一个更好而简洁的示例。尝试将一些图像放入Db时,我很难找到它。