上传图片---SpringMVC学习笔记（十一）

最新推荐文章于 2025-08-15 12:37:27 发布

update o0

最新推荐文章于 2025-08-15 12:37:27 发布

阅读量252

点赞数 1

分类专栏： springmvc 文章标签： mybatis spring spring mvc 服务器 java

springmvc 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在商品修改页面添加图片上传功能，包括配置Tomcat虚拟目录、Spring MVC解析器及控制器方法等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

在修改商品页面，添加上传商品图片功能。

第一步：创建图片的虚拟目录，用来存储上传的图片

一般服务器中的图片会用单独的服务器存储。
在tomcat上配置图片虚拟目录，在tomcat下conf/server.xml中添加：

<Context docBase="F:\develop\upload\temp" path="/pic" reloadable="false"/>
 1
 1

这里写图片描述
访问http://localhost:8080/pic即可访问F:\develop\upload\temp下的图片。
注意：访问/pic表示就是直接访问路径F:\develop\upload\temp。

第二步：配置解析器

在页面form中提交enctype=”multipart/form-data”的数据时，需要springmvc对multipart类型的数据进行解析。

在springmvc.xml中配置multipart类型解析器。

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

 1
2
3
4
5
6
7
8
9
 1
2
3
4
5
6
7
8
9

第三步：引入上传图片需要的jar包

CommonsMultipartResolver解析器依赖commons-fileupload和commons-io，加入如下jar包：
这里写图片描述

第四步：图片上传的controller方法

//商品修改提交
    @RequestMapping("/editItemSubmit")
    public String editItemSubmit(Items items, MultipartFile pictureFile)throws Exception{

        //原始文件名称
        String pictureFile_name =  pictureFile.getOriginalFilename();
        //新文件名称
        String newFileName = UUID.randomUUID().toString()+pictureFile_name.substring(pictureFile_name.lastIndexOf("."));

        //上传图片
        File uploadPic = new java.io.File("F:/develop/upload/temp/"+newFileName);

        if(!uploadPic.exists()){
            uploadPic.mkdirs();
        }
        //向磁盘写文件
        pictureFile.transferTo(uploadPic);

.....

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

这里写图片描述

第五步：图片上传的页面

form添加enctype=”multipart/form-data”：

<form id="itemForm"
        action="${pageContext.request.contextPath }/item/editItemSubmit.action"
        method="post" enctype="multipart/form-data">
        <input type="hidden" name="pic" value="${item.pic }" />

 1
2
3
4
5
 1
2
3
4
5

file的name与controller形参一致：

            <tr>
                <td>商品图片</td>
                <td><c:if test="${item.pic !=null}">
                        <img src="/pic/${item.pic}" width=100 height=100 />
                        <br />
                    </c:if> <input type="file" name="pictureFile" /></td>
            </tr>