首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用.Net MVC将上传的图片保存到数据库中并在视图中显示

在.NET MVC框架中,将上传的图片保存到数据库并在视图中显示涉及几个步骤。以下是详细的步骤和示例代码:

基础概念

  1. 文件上传:允许用户通过表单上传文件。
  2. 数据库存储:将文件以二进制格式存储在数据库中。
  3. 视图显示:从数据库读取二进制数据并在网页上显示图片。

优势

  • 集中管理:所有图片数据存储在一个地方,便于管理和备份。
  • 安全性:可以通过数据库权限控制访问。

类型

  • Binary (BLOB):直接存储图片的二进制数据。
  • 文件路径:存储图片文件的路径,而不是文件本身。

应用场景

  • 用户头像:用户上传自己的头像。
  • 产品图片:电子商务网站的产品图片。

实现步骤

1. 创建数据库模型

首先,创建一个模型来表示存储在数据库中的图片。

代码语言:txt
复制
public class ImageModel
{
    public int Id { get; set; }
    public byte[] ImageData { get; set; }
    public string ImageMimeType { get; set; }
}

2. 创建控制器动作

在控制器中创建动作来处理图片上传和显示。

代码语言:txt
复制
public class ImageController : Controller
{
    private readonly ApplicationDbContext _context;

    public ImageController(ApplicationDbContext context)
    {
        _context = context;
    }

    // GET: /Image/Upload
    public ActionResult Upload()
    {
        return View();
    }

    // POST: /Image/Upload
    [HttpPost]
    public ActionResult Upload(HttpPostedFileBase file)
    {
        if (file != null && file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var mimeType = file.ContentType;

            using (var ms = new MemoryStream())
            {
                file.InputStream.CopyTo(ms);
                var image = new ImageModel
                {
                    ImageData = ms.ToArray(),
                    ImageMimeType = mimeType
                };
                _context.Images.Add(image);
                _context.SaveChanges();
            }
        }

        return RedirectToAction("Index");
    }

    // GET: /Image/Display/5
    public ActionResult Display(int id)
    {
        var image = _context.Images.Find(id);
        if (image != null)
        {
            return File(image.ImageData, image.ImageMimeType);
        }
        return HttpNotFound();
    }
}

3. 创建视图

创建上传图片的视图和显示图片的视图。

Upload.cshtml:

代码语言:txt
复制
@using (Html.BeginForm("Upload", "Image", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="file" />
    <input type="submit" value="Upload" />
}

Display.cshtml:

代码语言:txt
复制
<img src="@Url.Action("Display", "Image", new { id = Model.Id })" alt="Uploaded Image" />

常见问题及解决方法

问题1:图片上传后无法显示

原因:可能是图片路径错误或数据库中的二进制数据损坏。 解决方法

  • 确保Display动作正确返回图片数据。
  • 检查数据库中的ImageData字段是否正确存储了图片的二进制数据。

问题2:上传大文件时出现内存不足错误

原因:上传的文件过大,导致内存不足。 解决方法

  • web.config中增加httpRuntimemaxRequestLengthexecutionTimeout设置。
  • 使用流式处理上传文件,避免一次性加载整个文件到内存。
代码语言:txt
复制
<configuration>
  <system.web>
    <httpRuntime maxRequestLength="2097152" executionTimeout="3600" />
  </system.web>
</configuration>

通过以上步骤和示例代码,你应该能够在.NET MVC应用中实现图片的上传、存储和显示。如果遇到其他具体问题,可以根据错误信息进一步调试和解决。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ASP.NET MVC学习笔记06编辑方法和编辑视图

上图中用到了DataAnnotations。Display属性指明要显示的字段的名 称(在本例中“Release Date”来代替“ReleaseDate”)。...因 此,ASP.NET 将 http://localhost:xxxxx/Movies/Edit/4转化到 Movies 控制器中 Edit操作 方法,参数 ID等于1 的请求。...ASP.NET MVC model binder接收form所post的数据,并转换所接收的 Movie请求数据从而创建一个Movie对象。...如果数据是有效的电影数据,将保存到数据库的Movies集合(MovieDBContext 实例)。通过调用MovieDBContext的SaveChanges方法,新的电影数据会被保存到数据库。...在下一篇中,将看到如何添加一个属性到 Movie model,和如何添加一个初始值设定项值,它会自动创建一个测试数据库。

5K50

扒一扒使用boostrap-fileinput上传插件遇到的坑,Bootstrap-fileinput上传插件的使用详解,「建议收藏」

由于公司项目的需求,需要实现动植物名录的添加,包括姓名等信息和图片等,需要使用bootstrap-fileinput的上传插件,在提交添加界面表单数据的同时上传一张或者多张图片,并将上传的图片保存到本地磁盘中...(本文是f:盘的目录下),在在实现的时候,不适用bootstrap-fileinput上传插件本身的上传按钮(因为本身的按钮只能上传图片),需要点击提交,将表单的其他信息和图片一起提交到后台。...实现思路:原来我的思路是不使用插件的上传按钮,而自己通过js将插件里面的多文件与表单一起提交,但是到后台只能获取到最后一个文件,我不是文件数组。...触发提交文件上传,并传递额外参数id,最后根据传递的额外参数,修改相应的实体类中的字段,将上传的图片的名字,修改并保存数据库的pictureurl字段中!...,并保存到数据库。

3.8K20
  • Asp.Net MVC4入门指南(6):验证编辑方法和编辑视图

    如果数据是有效的电影数据,将保存到数据库的Movies集合(MovieDBContext instance)。...通过调用MovieDBContext的SaveChanges方法,新的电影数据会被保存到数据库。...数据保存之后,代码会把用户重定向到MoviesController类的Index操作方法,页面将显示电影列表,同时包括刚刚所做的更新。 如果form发送的值不是有效的值,它们将重新显示在form中。...当用户提交窗体时,操作方法将获取用户输入的搜索条件并在数据库中搜索。 显示 SearchIndex 窗体 通过将SearchIndex操作方法添加到现有的MoviesController类开始。...在下一节中,您将看到如何将属性添加到Movie模型,以及如何添加一个初始设定并自动创建一个测试数据库。

    4.3K100

    【译】利用Asp.net MVC处理文件的上传下载

    大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说【译】利用Asp.net MVC处理文件的上传下载,希望能够帮助大家进步!!!...这篇文章主要说如何在Asp.net MVC中上传文件,然后如何再从服务器中把上传过的文件下载下来....将数据库中的文件返回给用户: 你如何将文件传送给用户取决于你最开始如何存储它,如果你将文件存入数据库,你会用流的方式将文件返还给用户,如果你将文件存在硬盘中,你只需要提供一个超链接即可,或者也可以以流的方式...Action只需提供一个超链接: Click to get file 如果在数据库中存储的图片是图片类型,和使用超链接不同的是,我们通过指向Controller...比如说:返回Asp.net Chart 控件在内存中生成的图表图片,而这并不需要将图片存到磁盘中.

    87820

    MVC结构简介

    MVC结构本来是为了将传统的输入(input)、处理(processing)、输出(output)任务运用到图形化用户交互模型中而设计的。...同时,它也为控制器(Controller)提供访问封装在模型内部的应用程序功能的能力。 一个视(View)用来组织模型的内容。它从模型那里获得数据并指定这些数据如何表现。...下图描述了一个MVC应用程序中模型、视、控制器三部分的关系: ? 图中实线表示高耦合的依赖关系,虚线表示低耦合的消息关系。业务模块是不依赖用户界面的,这样就隔离了用户界面的变更对业务程序的影响。...在windows窗体程序中,控制器和界面经常是合并在一起的,比如MFC框架中使用的Document-View模式,其中的Document对应MVC中的Model,负责保存业务数据,处理业务逻辑,View...相当于MVC中的View+Controller,负责用户界面的显示、用户输入的收集和画面的跳转控制。

    1K50

    MVC 是什么?它是如何工作的?-15

    MVC 是什么?它是如何工作的?我们来解剖它 在本节课中我们要讨论的内容: 什么是 MVC? 它是如何工作的? 什么是 MVC ?...MVC 如何工作 让我们了解 MVC 设计模式是如何与案例一起工作的。 假设我们想要查询特定学生的详细信息(即 ID 为 1 的学生信息),并在 HTML 表格中的网页上显示这些详细信息,如下所示。...View -视图 MVC 中的 View 应该只包含显示 Controller 提供给它的 Model 数据的逻辑。您可以将视图视为 HTML 模板。...视图的唯一作用是将学生数据显示在 HTML 表中。 这是视图中的代码。 @model StudentManagement.Model.Student 的下一个视频中,我们将讨论在我们的 asp.net core 应用程序中设置 MVC 中间件。

    2.2K40

    Java实现把图片上传到图片服务器(nginx+vsftp)前言:需求:功能实现:总结:

    前言: 在我另一篇笔记中已经记载了如何用nginx + vsftp搭建图片服务器(请参考nginx + vsftp搭建图片服务器),并且用vsftp的客户端工具filezilla测试过已经可用。...但是在开发中应该是把用户在前端页面提交的图片保存到图片服务器中,接下来就来实现这个功能。...需求: 用户在页面中上传一张图片,把图片保存到图片服务器,把图片的url保存到user表中,复制user表中的图片url在浏览器中可访问到用户上传的图片。 功能实现: 一、数据库设计: ?...,然后通过@Value注解获取application.properties中配置的ftp相关的配置的值,调用ftp工具类进行图片的上传,调用service把用户信息保存到数据库。...,调用service保存到数据库中。

    4.2K30

    ASP.NET MVC 5 - 验证编辑方法(Edit method)和编辑视图(Edit view)

    如果数据是有效的电影数据,将保存到数据库的Movies集合(MovieDBContext 实例)。通过调用MovieDBContext的SaveChanges方法,新的电影数据会被保存到数据库。...如果禁用JavaScript,则不会有客户端验证,但服务器将检测回传的值是无效的,而且将重新显示表单中的值与错误消息。在本教程的后面,我们验证更详细的审查。...在下一节中,您将看到如何添加一个属性到Movie model,和如何添加一个初始值设定项值,它会自动创建一个测试数据库。...ASP.NET MVC 5 - 将数据从控制器传递给视图 5. ASP.NET MVC 5 - 添加一个模型 6. ...ASP.NET MVC 5 - 使用Wijmo MVC 5模板1分钟创建应用 希望这些文章对感兴趣的朋友有所帮助,另附上PDF版的汇总文档: 《ASP.NET MVC 5 入门指南》PDF版

    6.7K110

    .net core版 文件上传 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode 1.导入所需要的包:nuget...allowedFileExtensions: ['png'],//接收的文件后缀 showUpload: true, //显示批量上传按钮...dropZoneEnabled: true,//是否显示拖拽区域 //minImageWidth: 50, //图片的最小宽度...mvc下边没有区别,只有一个地方需要特别注意一下,外部的script和css文件的引用文件需要放到wwwroot文件中,而不是项目的根目录下。...这个结构中必须包含error字段,用来给前台返回错误数据,详情查看官方文档-官网地址 附一张最终的上传成功保存到本地的图片: ?

    2.1K40

    CMS项目实践学习总结

    而对于ASP.NET MVC,重点在于了解MVC模型的原理、与WebForm的差别,后续会选择一个基于MVC的项目来巩固实践。...如果想存到其他数据库中只要实现OracleMembershipProvider等即可。 Membership API就是替我们去操作数据库、Cookie,也是ADO.Net等,没有多神奇。...(5)无刷新上传   网站编辑编辑文章的时候需要插入图片、文件,如果使用FileUpload控件必须提交表单,则非常难用(很多文件)。...此CMS系统实践中使用CKEditor(3.6版本后支持了UBB便器),数据库中保存的也是UBB内容,在显示出来的时候翻译成HTML代码。...只要评论不含有禁用词,在将评论放入数据库之前将文章中出现的需要进行替换的词进行替换再保存到数据库中。

    1.4K50

    ASP.NET MVC 5 -从控制器访问数据模型

    在本节中,您将创建一个新的MoviesController类,并在这个Controller类里编写代码来取得电影数据,并使用视图模板将数据展示在浏览器里。...在接下来的教程中,我将展示如何做到这一点。现在,只需输入整数,如10。...单击Create按钮将使得窗体提交至服务器,同时电影信息也会保存到数据库里,然后您会被重定向到/Movies 的URL,您可以在列表中看到刚刚创建的新电影。 ?...现在,您可以在这个简单列表页面里:显示、编辑、更新、删除数据库里的数据了。在下一次的教程中,我们会继续看看scaffolded自动生成的其它代码。...ASP.NET MVC 5 - 使用Wijmo MVC 5模板1分钟创建应用 希望这些文章对感兴趣的朋友有所帮助,另附上PDF版的汇总文档: 《ASP.NET MVC 5 入门指南》PDF版

    5.9K50

    Asp.Net MVC4入门指南(5):从控制器访问数据模型

    在本节中,您将创建一个新的MoviesController类,并在这个Controller类里编写代码来取得电影数据,并使用视图模板将数据展示在浏览器里。...强类型模型和 @model 关键字 在本系列之前的教程中,您看到了使用ViewBag对象,从控制器传递数据或对象给视图模板。ViewBag是一个动态的对象,提供了方便的后期绑定方法将信息传递给视图。...ASP.NET MVC 还提供了传递强类型数据或对象到视图模板的能力。这种强类型使得更好的在编译时检查您的代码并在Visual Studio 编辑器中提供更加丰富的智能感知。...请注意这些代码是如何在Index操作方法中,创建List对象,并调用View方法的。...现在,您可以在简单列表页面里,来显示数据库里的数据了。在下一次的教程中,我们会继续看看框架自动生成的其它代码。

    4.2K50

    ASP.NET MVC编程——验证、授权与安全

    AuthorizeCore,HandleUnauthorizedRequest,OnAuthorization,那么在执行授权动作的过程中他们是如何被调用的呢?...4 防范攻击 4.1跨站脚本攻击(XSS) 被动注入:用户的输入含有恶意脚本,而网站又能够不加检验地接受这样的输入,进而保存到数据库中。...主动注入:用户将含有恶意脚本的内容输入到页面文本框中,然后在屏幕上显示出来。...],注意表单一定要使用@Html.BeginForm生成 实现机制:AntiForgeryToken方法向用户浏览器cookie中写入一个加密的数据,并在表单内插入一个隐藏栏位,每次刷新页面时隐藏栏位的值都不同...Scott Allen,孙远帅/邹权译  ASP.NET MVC4 高级编程(第四版) 3.黄保翕,ASP.NET MVC4开发指南 4.蒋金楠,ASP.NET MVC4框架揭秘 5.https://www.asp.net

    3.2K60

    ASP.NET MVC 5 - 给电影表和模型添加新字段

    ,以显示浏览器视图中创建和编辑新的评级(Rating)属性。...不足之处,你将失去现有的数据库中的数据 - 所以对生产数据库你不想使用这种方法! 通常是一个富有成效的办法,开发一个应用程序来初始化数据库的自动测试数据。...新的电影,包括评级,将显示在电影列表中: ? 该项目目前正在使用的迁移 (migrations),当你添加新的字段或更新数据库Schema, 你不需要删除数据库。...在本节中,您看到了如何修改模型对象并始终保持其和数据库Schema的同步。您还学习了使用填充示例数据来创建新数据库的例子,您可以反复尝试。...接下来,让我们看看如何将丰富的验证逻辑添加到模型类,并对模型类执行一些强制的业务规则验证。相信有了本节如何修改模型对象并始终保持其和数据库Schema同步的内容介绍,大家会对MVC的理解又加深一步。

    2.4K80

    Java文件上传与下载【面试+工作】

    1.servlet 如何实现文件的上传和下载? 1.1上传文件 通过前台选择文件,然后将资源上传到(即新建一个文件)到发布的资源文件下面, 下载就是url 到发布的资源文件,触发即可自动下载。...重启tomcat服务器,即可实现对压缩包和对图片的下载。 ---- 2、struts如何实现文件的上传和下载?...():获取上传文件的原名 Long getSize():获取文件的字节大小,单位为byte boolean isEmpty():是否有上传文件 void transferTo(File dest):将上传文件保存到一个目录文件中...点上传按钮,这是已将上传的文件通过二进制保存到web服务器上去了,如下图: ? 使用对象接收上传文件 上面我们通过案例演示了Spring MVC上传文件,接下来,我们演示使用对象接收上传文件。...web.xml的配置文件: ? OK,以上就是完整的使用Spring MVC框架实现了文件的上传和下载。

    3.8K40

    ASP.NET MVC5高级编程——(3)MVC模式的模型

    在这里我们要讨论的是那些发送信息到数据库,执行业务计算,并在视图中渲染的模型对象。也就是说这些对象代表着应用程序关注的域,模型就是要显示、保持、创建、更新和删除的对象。...EF是一个对象关系映射(object-relational mapping,ORM)框架,它不但知道如何在关系型数据库中保存.NET对象,而且还可以利用LINQ查询语句检索那些保存在关系型数据库中的.net...这个操作的作用就是接收含有用户所有编辑项的Album模型对象,并将这个对象保存到数据库中。...复杂模型绑定:在ASP.NET MVC中,可以通过DefaultModelBinder类将form数据对应到复杂的.NET类,即模型。该模型可能是一个List类或一个含有多个属性的自定义类。...在ASP.NET MVC中可以通过使用Bind属性限制可被更新的Model属性。如绑定多个字段中的部分字段:通过Bind属性来定义Model中需要绑定哪些字段。

    4.8K40

    ASP.NET MVC编程——控制器

    将调用页代码修改如下: @Html.Action("TestPy") 运行可以正常显示部分视图内容 3)RequireHttpsAttribute...,不会路由到此控制器方法 5向视图传递数据 与其说传递数据,倒不如说视图如何获得控制器处理过的数据。...视图通过两种方式可以拿到数据: 1)通过控制器操作返回的结果(控制器返回结果是数据和视图的结合。 2)将结果赋给控制器属性并在View中使用这些属性。...使用异步控制器的目的: 异步控制器操作中也要等待任务直至处理完,所以处理速度不比同步方法快,其主要作用是高效地利用服务器资源。...Scott Allen,孙远帅/邹权译  ASP.NET MVC4 高级编程(第四版) 3.黄保翕,ASP.NET MVC4开发指南 4.蒋金楠,ASP.NET MVC4框架揭秘 5.https://www.asp.net

    2.2K90

    Asp.Net MVC4入门指南(7):给电影表和模型添加新字段

    在本节中,您将使用Entity Framework Code First来实现模型类上的操作。从而使得这些操作和变更,可以应用到数据库中。...Visual Studio Express for Web将显示数据库资源管理器,Visual Studio 2012 将显示服务器资源管理器。...新的电影,包括评级,将显示在电影列表中: ? 此外您也应该把Rating 字段添加到编辑、 详细信息和 SearchIndex 的视图模板中。...在本节中,您看到了如何修改模型对象并始终保持其和数据库Schema的同步。您还学习了使用填充示例数据来创建新数据库的例子,您可以反复尝试。...接下来,让我们看看如何将丰富的验证逻辑添加到模型类,并对模型类执行一些强制的业务规则验证。相信有了本节如何修改模型对象并始终保持其和数据库Schema同步的内容介绍,大家会对MVC的理解又加深一步。

    2K100

    IM开发干货分享:有赞移动端IM的组件化SDK架构设计实践

    4、整体结构 下图中简要描述了有赞客户端中IM系统的基本结构 :  如上图所示,各分层的职责分工如下: 1)消息通道层:维护Socket长连接作为消息通道,消息收发流程主要在这一层中完成; 2)持久化层...:主要将消息存入数据库中,富媒体文件存入文件缓存中,方便第二次展示消息时候,从本地加载,而不是网络层获取; 3)逻辑处理层:完成各种消息相关的逻辑处理,如排序,富媒体文件的预处理等; 4)UI显示层:将数据在...可根据消息类型进行后续的分发处理。 业务如需使用此全局监听器,需要自行实现此接口,并在业务初始化时,注册此监听器即可。...2)图片消息:通过七牛服务器设置了缩略图,接收方收到消息后,会先下载缩略图,当用户再点击进入图片详情页时,会下载大图,Andorid客户端使用Picasso加载库加载图片,并做本地缓存。...9、设计要点5:UI 中聊天会话数据加载策略 参考业界主流的IM系统方案,用户聊天时,需要将已经发送和接收到的聊天信息保存到本地,而不是每次都拉取历史数据。

    1.9K20
    领券