SpringMVC学习系列(六)------图片的上传

最新推荐文章于 2023-07-16 15:59:31 发布

剑小纯

最新推荐文章于 2023-07-16 15:59:31 发布

阅读量143

点赞数

分类专栏： SpringMVC 后端技术文章标签：图片上传 MultipartFile

本文链接：https://blog.csdn.net/xiaoyao2246/article/details/80804770

版权

后端技术同时被 2 个专栏收录

73 篇文章 6 订阅

订阅专栏

SpringMVC

7 篇文章 0 订阅

订阅专栏

前言

在表单数据中,我们可能会遇到头像、照片等图片的上传等需求,那么如果表单中包含一个图片元素,我们在controller中应该如何接收呢?

正文

在实际的项目中,我们通常都会有专门的图片服务器来存储图片,这里我们为了简单,直接使用自己的本地目录来虚拟一个图片路径,只要能达到图片上传的目的就行。我们使用tomcat的虚拟目录来实现:
在tomcat目录下的conf/server.xml中添加:<Context docBase="本地目录" path="/pic" reloadable="false"/>,配置了如上的虚拟目录后,访问http://localhost:8080/pic就可以访问配置的本地目录下的图片。
要实现文件上传,要再pom文件中添加以下依赖:

        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.2.2</version>
        </dependency>

其次还要再springmvc.xml文件中配置多媒体解析器:

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

我们在原来的登录页面的jsp中加入一个文件上传的input:

    <form action="${pageContext.request.contextPath }/fileupload.action" enctype="multipart/form-data" method="post">
        账号:<input type="text" name="username">
        密码:<input type="password" name="password">
        <br/>
        自定义日期格式数据测试:
        <input type="text" name="texttime" value="<fmt:formatDate value='${texttime}' pattern='yyyy-MM-dd HH:mm:ss'/>"/>   
        <h3>${data}</h3>
        <input type="file" name="picFile">
        <input type="submit" value="登录">
    </form>

**需要注意的是,如果要使用文件上传的功能,form表单必须有一个enctype="multipart/form-data"属性,且表单的提交方式为post,这样子在点击登录按钮的时候,表单会提交到后台controller的方法中:

    @RequestMapping("/fileupload")
    public String uploadPic(MultipartFile picFile, Model model) throws Exception {
        //生成新的文件名
        String picName = UUID.randomUUID().toString();
        //扩展名
        String oriName = picFile.getOriginalFilename();
        String extName = oriName.substring(oriName.lastIndexOf("."));
        //保存文件
        picFile.transferTo(new File("F:\\temp\\" + picName + extName));
        model.addAttribute("picName", picName + extName);
        return "/WEB-INF/jsp/success.jsp";
    }

可以看到,在这里我们如果想要接受页面的图片,要使用MultipartFile这个对象来接收,且属性名要和前台input的属性名称一致。在这个方法中,我们生成了一个新的文件名,并将其放在本地目录下,最后返回了一个success的jsp页面,并在model中将新图片的名称携带了过去。在success。jsp中是这样取值的：

<body>
    <h1>图片保存成功</h1>

    <input type="image" src="/pic/${picName}">
</body>

这里直接将图片名取出来，在一个图片input文本框中显示出来。
这里写图片描述
图片正常显示，说明我们的文件上传成功，而在本地目录下，也保存了刚才上传的图片。

总结

在本文中对SpringMVC的图片上传的功能做了一个简述，在实际的工作中，使用七牛云等图片服务器将会更加方便的实现图片的管理和存储。

剑小纯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC学习系列(六)------图片的上传

前言在表单数据中,我们可能会遇到头像、照片等图片的上传等需求,那么如果表单中包含一个图片元素,我们在controller中应该如何接收呢?正文在实际的项目中,我们通常都会有专门的图片服务器来存储图片,这里我们为了简单,直接使用自己的本地目录来虚拟一个图片路径,只要能达到图片上传的目的就行。我们使用tomcat的虚拟目录来实现:总结...
复制链接

扫一扫