springmvc-----图片上传

最新推荐文章于 2025-04-06 07:35:53 发布

第一小菜鸟

最新推荐文章于 2025-04-06 07:35:53 发布

阅读量480

点赞数

分类专栏： springmvc java技术文章标签： springmvc spring mvc springmvc上传图片

本文链接：https://blog.youkuaiyun.com/xu1916659422/article/details/77433963

版权

springmvc 同时被 2 个专栏收录

10 篇文章

订阅专栏

java技术

8 篇文章

订阅专栏

点滴记载，点滴进步，愿自己更上一层楼。

图片上传，首先需要两个上传图片的jar包，添加到pom中。

    <!-- 图片上传相关 start -->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.2.2</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>
    <!-- 图片上传相关 end -->

然后配置springmvc对应的图片上传的解析器等。

springmvc.xml添加如下代码。

    <!-- 文件上传 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 设置图片上传最大尺寸 -->
        <property name="maxUploadSize">
            <!-- 5M -->
            <value>52428880</value>
        </property>

    </bean>

图片上传，form表单必须设置属性 enctype="multipart/form-data"

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page isELIgnored="false"%>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%-- enctype="multipart/form-data" 文件上传必须有这个 --%>
<form action="${pageContext.request.contextPath}/testImgUpload" method="post" enctype="multipart/form-data">
    姓名:<input type="text" name="name" value="${imageTestVo.name}"><br/><br/>
    年龄:<input type="text" name="age" value="${imageTestVo.age}"><br/><br/>
    <c:if test="${imageTestVo.img_src != null && imageTestVo.img_src != ''}">
        <img src="/pic/${imageTestVo.img_src}" width="100px",height="100px">
    </c:if>
    头像:<input type="file" name="pic_src" ><br/><br/>
    <input type="submit"  value="submit"><br/><br/>
</form>

</body>
</html>

idea设置对应的图片存储路径。

建好自己的存储图片的文件夹，我的 D:\java\myProject\pictmp

idea配置。

第一步打开tomcat配置界面。

切换到Deployment tab

然后选择自己存放图片的位置。

最后 application context那里填写pic 那个斜杠最好别去掉。注意上面的jsp的img路径跟这里的根路径是对应的，别设置错了。

到此tomcat存放图片虚拟目录设置完毕。

编写一个vo ImageTestVo.java

package com.soft.po;

/**
 * Created by xuweiwei on 2017/8/20.
 */
public class ImageTestVo {
    private String name;
    private Integer age;
    private String img_src;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getImg_src() {
        return img_src;
    }

    public void setImg_src(String img_src) {
        this.img_src = img_src;
    }
}

对应的controller信息。用MultipartFile来接收图片信息。参数名字必须跟form中的名字对应。

package com.soft.controller;

import com.soft.po.ImageTestVo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import java.io.File;
import java.util.UUID;

/**
 * Created by xuweiwei on 2017/8/20.
 */
@Controller
public class TestImageController {

    @RequestMapping(value="/toImgUpload")
    public ModelAndView toImgUpload(ImageTestVo imageTestVo){
        ModelAndView model = new ModelAndView();
        // 将传入绑定成功的参数在页面显示。
        model.setViewName("test/testImageUpload");
        return model;
    }

    @RequestMapping(value="/testImgUpload")
    public ModelAndView testImgUpload(ImageTestVo imageTestVo, MultipartFile pic_src){
        String originalFilename = pic_src.getOriginalFilename();
        if(pic_src != null && originalFilename !=null && originalFilename.length()>0){
            String filePath = "D:\\java\\myProject\\pictmp\\";
            String newFileName = UUID.randomUUID()+originalFilename.substring(originalFilename.lastIndexOf("."));
            File newFile = new File(filePath+newFileName);
            try{
                pic_src.transferTo(newFile);
            }catch (Exception e){

            }
            imageTestVo.setImg_src(newFileName);
        }
        ModelAndView model = new ModelAndView();
        model.addObject("imageTestVo",imageTestVo);
        // 将传入绑定成功的参数在页面显示。
        model.setViewName("test/testImageUpload");
        return model;
    }
}

配置完毕，开始测试。

首先进入到图片上传的jsp。