springmvc实现图片的上传与显示

已于 2022-12-10 23:00:35 修改
阅读量1.8k 收藏 17
点赞数 3
分类专栏： SpringBoot 文章标签： java servlet tomcat springmvc idae
于 2022-12-10 23:00:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53843555/article/details/128270165
版权

今天在做springmvc的上传与显示的实验时，一直访问不到图片，最后用tomcat虚拟目录解决。

1.tomcat虚拟目录的设置
tomcat虚拟目录
2.项目代码
2.1项目结构：
在这里插入图片描述

2.2pom文件

<dependencies>
    <!--文件上传 -->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.1</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.2</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.3.23</version>
    </dependency>
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.24</version>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.13.2</version>
      <scope>test</scope>
    </dependency>
  </dependencies>

2.3Customer

package com.cqust.entity;


import lombok.Data;
import org.springframework.web.multipart.MultipartFile;



@Data
public class Customer {
    //客户名称、客户单位、客户职位、客户生日、客户性别、客户联系方式、客户头像
    private String name;
    private String company;
    private String job;
    private String birthday;
    private String sex;
    private String phone;
    private MultipartFile img;
    private String imgUrl;
}

2.4CustomerController

package com.cqust.controller;

import com.cqust.entity.Customer;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import java.io.File;
import java.io.IOException;

@RestController
@RequestMapping("/customer")
public class CustomerController {
    @ResponseBody
    @RequestMapping(value = "/edit")
    public ModelAndView test18(Customer customer) throws IOException {
        System.out.println("用户名 : " +customer.getName());
        System.out.println("文件名字 : "+ customer.getImg());

        //获取上传文件的名称
        String originalFilename = customer.getImg().getOriginalFilename();
        System.out.println("上传的文件的名称是 : "+originalFilename);

        customer.setImgUrl("/FileDir/img/"+customer.getImg().getOriginalFilename());
        //转存文件
        customer.getImg().transferTo(new File("E:\\tomcat\\apache-tomcat-9.0.59\\FileDir\\img\\"+originalFilename));
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("customer", customer);
        modelAndView.setViewName("/showCustomer.jsp");
        System.out.println(customer);
        return modelAndView;
    }
}

2.5springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <context:component-scan base-package="com.cqust"></context:component-scan>
<!--    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">-->
<!--        <property name="prefix" value="/WEB-INF/page/"/>-->
<!--        <property name="suffix" value=".jsp"/>-->
<!--    </bean>-->
    <!--配置spring_mvc的文件上传解析器的bean对象-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--文件上传的总大小-->
        <property name="maxUploadSize" value="1405600" />
        <!--上传单个文件的总大小-->
        <property name="maxUploadSizePerFile" value="524800" />
        <!--上传文件的编码类型-->
        <property name="defaultEncoding" value="UTF-8"/>
    </bean>
    <mvc:annotation-driven></mvc:annotation-driven>
</beans>

2.6web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>myweb</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>myweb</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <filter>
        <filter-name>characterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <!--        设置项目使用的字符编码-->
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceRequestEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>forceResponseEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>

    <filter-mapping>
        <filter-name>characterEncodingFilter</filter-name>
        <!--        /*:表示强制所有请求先通过过滤器-->
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

2.7cutomerEdit.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            padding-top: 25px;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            margin: auto;
        }
        .rg_left{
            float: left;
            margin: 15px;
        }
        .rg_left>p:first-child{
            color: #FFD026;
            font-size: 20px;
        }
        .rg_left>p:last-child{
            color: #A6A6A6;
            font-size: 20px;
        }

        .rg_center{
            float: left;
        }

        .rg_right p{
            font-size: 15px;
        }
        .rg_right p a{
            color: coral;
        }
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        .username{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }

        #btn_sub{
            width: 100px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册页面</p>
    </div>
    <div class="rg_center" id="app">
        <div class="rg_form">
            <%--文件上传表单要设置  enctype="multipart/form-data"--%>
            <form action="${pageContext.request.contextPath}/customer/edit" method="post" enctype="multipart/form-data">
                <table>
                    <tr>
                        <td class="td_left">姓名 </td>
                        <td class="td_right"><input type="text" name="name" class="username"> </td>
                    </tr>
                    <tr>
                        <td class="td_left">单位 </td>
                        <td class="td_right"><input type="text" name="company" class="username"> </td>
                    </tr>
                    <tr>
                        <td class="td_left">职位 </td>
                        <td class="td_right"><input type="text" name="job" class="username"> </td>
                    </tr>
                    <tr>
                        <td class="td_left">生日 </td>
                        <td class="td_right"><input type="date" name="birthday" class="username"> </td>
                    </tr>
                    <tr>
                        <td class="td_left">性别 </td>
                        <td class="td_right">
                            <input type="radio" name="sex" value="男" checked>男
                            <nbsp/><nbsp/><nbsp/>
                            <input type="radio" name="sex" value="女">女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">手机 </td>
                        <td class="td_right"><input type="text" name="phone" class="username"> </td>
                    </tr>
                    <tr>
                        <%--这里的name应该与方法中保存文件的参数名称一致，spring MVC才能自动传入--%>
                        <td class="td_left">头像 </td>
                        <td class="td_right"><input type="file" name="img"> </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <input type="submit" value="注册" id="btn_sub" >
                        </td>
                    </tr>

                </table>
            </form>
        </div>
    </div>
</div>
</body>
</html>

2.8showCustomer.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            padding-top: 25px;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            margin: auto;
        }
        .rg_left{
            float: left;
            margin: 15px;
        }
        .rg_left>p:first-child{
            color: #FFD026;
            font-size: 20px;
        }
        .rg_left>p:last-child{
            color: #A6A6A6;
            font-size: 20px;
        }

        .rg_center{
            float: left;
        }
        .rg_right p{
            font-size: 15px;
        }
        .rg_right p a{
            color: coral;
        }
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        .username{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        .img{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin-left: 30px;
        }
    </style>
</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p>用户界面</p>
    </div>
    <div class="rg_center" id="app">
        <div class="rg_form">
            <%--文件上传表单要设置  enctype="multipart/form-data"--%>
            <form action="${pageContext.request.contextPath}/customer/edit" method="post" enctype="multipart/form-data">
                <table>
                    <tr>
                        <td class="td_left">头像 </td>
                        <td class="td_right"><img src="${customer.imgUrl}" class="img"> </td>
                    </tr>
                    <tr>
                        <td class="td_left">名称 </td>
                        <td class="td_right"><input type="text" name="name" class="username" readonly="readonly" value="${customer.name}"> </td>
                    </tr>
                    <tr>
                        <td class="td_left">单位 </td>
                        <td class="td_right"><input type="text" name="company" class="username" readonly="readonly" value="${customer.company}"> </td>
                    </tr>
                    <tr>
                        <td class="td_left">职位 </td>
                        <td class="td_right"><input type="text" name="job" class="username" readonly="readonly" value="${customer.job}"> </td>
                    </tr>
                    <tr>
                        <td class="td_left">生日 </td>
                        <td class="td_right"><input type="text" name="birthday" class="username" readonly="readonly" value="${customer.birthday}"> </td>
                    </tr>
                    <tr>
                        <td class="td_left">性别 </td>
                        <td class="td_right"><input type="text" name="sex" class="username" readonly="readonly" value="${customer.sex}"> </td>
                    </tr>
                    <tr>
                        <td class="td_left">手机 </td>
                        <td class="td_right"><input type="text" name="phone" class="username" readonly="readonly" value="${customer.phone}"> </td>
                    </tr>

                </table>
            </form>
        </div>
    </div>
</div>
</body>
</html>

2.9配置tomcat（记得勾选Deploy applications configured in Tomcat instance）
在这里插入图片描述

3.效果展示
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

202212102259六

baibai___
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
spring-mvc上传图片并回显图片
biubiubiu
07-25 1515
一.在spingmvc配置文件中配置文件解析器 二.编写controller @RequestMapping("/courseUpload") public ResponseResult fileUpload(@RequestParam("file")MultipartFile file, HttpServletRequest request) throws IOException { // 1.判断文件是否为空 if (file.isEmpty()) {
springmvc返回html页面_深入浅出SpringMVC系列~
weixin_39579127的博客
12-03 464
写在前面：小伙伴儿们，大家好！这次让我们一起来入门学习SpringMVC~思维导图：1，环境配置我们建一个Maven项目，把我们所需要的依赖引入进去；大概是下面这样；<dependencies><dependency><groupId>org.springframeworkgroupId><artifactId>spring-cont...
java上传图片到target目录，jsp如何访问target里的图片路径
qq_43842093的博客
06-03 2024
java上传图片到target目录，jsp如何访问target里的图片路径 昨天有个同学在做springmvc的图片上传，上传成功了却无法从网页中访问，我看了看上传后的路径，它用的idea编辑器，图片上传到了target里的目录，src目录中并没有。 我一直在使myeclipse，上传成功后的图片文件保存到了tomcat中的webapp目录中，能直接通过项目名+图片文件夹名+图片名来从浏览器中访问。 因为不知道target目录下的图片文件是否能够直接访问，试了好几次，localhost:8080/targe
IDEA中Spring MVC实现图片上传并显示
想好了就去做吧 即便失败了 至少这条路上留下了你的脚印
03-30 5317
IDEA 设置 TOMCAT 虚拟路径 1、先创建一个Spring MVC项目，将项目部署到tomcat中 2、Run → Edit Configurations . . . → 在弹出的对话框中 一、单个图片上传 上传文件所需jar包 commons-fileupload-1.2.2.jar commons-io-2.4.jar 配置web.xml <?xml version...
MVC的图片上传
weixin_44567571的博客
08-18 351
MVC的项目中有许多的重要知识点，比如：最为基础的MVC增删查改，增删查改只要学好了那么对MVC的映像就深了，只要基础学好了下面的知识就比较容易懂，下面我来介绍下另外一个基础知识吧，MVC的图片上传也是一个基础知识点，比增删查改复杂一点，接下来我就来介绍MVC的图片上传。 图片上传在许多的网页上也都有见到，MVC中的图片上传与大部分网页中的图片上传也没什么区别，在MVC项目中一般在修改页面与新增页面都会有一个图片上传的功能，保存图片首先检查存放用户头像的目录是否存在，用if语法判断是否上传了图片，获取文件的
webuploader+springmvc实现图片上传功能
08-26
在本文中，我们将深入探讨如何使用WebUploader和SpringMVC框架实现图片上传功能。WebUploader是一个轻量级的JavaScript组件，它提供了强大的文件上传功能，而SpringMVC则是Java领域广泛使用的MVC框架，用于构建Web...
SpringMVC利用dropzone组件实现图片上传
08-25
【SpringMVC与Dropzone组件实现图片上传详解】 在现代Web开发中，用户常常需要上传文件，特别是图片，以便在网站上展示或保存。SpringMVC作为Java领域中流行的MVC框架，提供了处理文件上传的功能。结合Dropzone，一...
SpringMVC+Ajax异步上传图片并显示(源码)
11-08
总的来说，SpringMVC结合Ajax提供了一种强大的方式来实现异步图片上传功能，它可以大大提高Web应用的交互性和用户体验。在压缩包`spring_ajax_photo`中，可能包含了实现这一功能的完整源代码，包括前端HTML、CSS、...
springMVC多图片上传示例
11-16
在本文中，我们将深入探讨如何使用Spring MVC框架实现多图片上传功能，并结合描述中的关键点进行详细解析。Spring MVC是Spring框架的一部分，专门用于构建Web应用程序，提供了模型-视图-控制器（MVC）架构模式的支持...
SpringMVC多个文件上传及上传后立即显示图片功能
08-29
SpringMVC多个文件上传及上传后立即显示图片功能 在本节中，我们将讨论如何使用 SpringMVC 实现多个文件上传并在上传后立即显示图片的功能。...这个功能可以广泛应用于图片上传、文档上传等场景中。
SSM(Spring+SpringMvc+Mybatis)图片上传保存到数据库与回显+sql
10-31
基于SSM（Spring+SpringMvc+Mybatis）框架的图片上传并保存到数据库中与回显的案例
springmvc上传图片代码
09-11
就是简单的一个springmvc上传文件的示例。上传图片后可以显示图片，适合新手学习
C# asp.net MVC 图片上传 多图片
10-24
C# asp.net MVC 图片上传 多图片上传
SpringMVC访问图片
05-11
SpringMVC访问图片，效果看博文http://blog.csdn.net/evankaka/article/details/45647031
springboot中的图片显示问题
weixin_52057887的博客
06-23 6415
在springboot中的通过页面来显示本地的图片 原因：本地图片不能显示最主要的原因是，图片在本地url和图片在服务器上被加载的URL是不一样的，也就是路径问题， 解决方法：因为springboot中的tomcat是内置的，所以需要编写一个配置文件，也就是图片位置的转化器，原理是在虚拟一个服务器上面的文件夹，与本地图片的位置进行匹配，在调用服务器上的图片。配置类如下 package com.ghrc.config; import org.springframework.context.annotati
Java工作笔记-Spring Boot上传图片并显示
IT1995的博客
12-04 5437
目录 基本概念 代码与实例 源码打包下载 基本概念 这个是基因Github的一个项目改的，因为页面关闭了，在此找不到了，不能把连接发上来。 这里使用的是FreeMarker。 为了避免重名，使用了UUID生成随机。 找图片文件主要是使用ResourceLoader。 代码与实例 程序运行截图如下： 点击选择文件，然后提交： 看看文件夹：...
springmvc后台获取图片，到jsp页面显示
xygg0801的博客
04-08 3048
1，jsp页面，img的url动态设定   $("#bomimg").attr("src", basepath+"biz/itemmanager/bizitembomimg/getBomImg/" + node.id); 2，后台， 需要引入jar包 代码段 [java] view plain copy  
springmvc 图片上传与回显
最新发布
12-17
Spring MVC 提供了文件上传的支持，可以使用 MultipartFile 类型来接收上传的文件。以下是图片上传与回显的步骤： 1. 在前端页面中添加一个表单，其中包含一个文件选择器用于选择要上传的图片文件，并设置表单的 enctype 为 "multipart/form-data"。 2. 在后端的控制器中定义一个处理文件上传的方法，并使用 @RequestParam 注解来接收上传的图片文件。例如： ``` @RequestMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) { // 处理上传的文件 return "redirect:/image"; // 重定向到显示图片的方法 } ``` 3. 在处理上传的方法中可以进行文件的存储操作，例如将文件保存到本地的文件系统或将文件存储到数据库。 4. 在显示图片的方法中，可以通过文件的路径或存储的唯一标识来获取图片，并将图片返回给前端页面。例如： ``` @RequestMapping("/image") public void showImage(HttpServletResponse response) throws IOException { // 从存储位置获取图片，如从文件系统获取或从数据库获取 File imageFile = new File("path/to/image.jpg"); // 设置响应的 Content-Type 为 image/jpeg response.setContentType(MediaType.IMAGE_JPEG_VALUE); // 将图片写入响应的输出流中 FileInputStream fileInputStream = new FileInputStream(imageFile); IOUtils.copy(fileInputStream, response.getOutputStream()); fileInputStream.close(); response.getOutputStream().close(); } ``` 5. 在前端页面中，可以使用 img 标签来显示图片，设置其 src 属性为显示图片的方法的 URL。例如： ``` <img src="/image" alt="Image"> ``` 通过以上步骤，我们可以实现图片上传与回显的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

baibai___

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值