Spring+SpringMVC+Mybatis(开发必备技能)03、图片上传

举报
红目香薰 发表于 2022/05/27 16:20:50 2022/05/27
【摘要】 ​ ​编辑Spring+SpringMVC+Mybatis(开发必备技能)03、图片上传目录Spring+SpringMVC+Mybatis(开发必备技能)03、图片上传1、pom.xml引包2、在webapp下创建【imgs】文件夹用作存储图片3、控制器编码:4、视图层编码:5、执行测试:1、pom.xml引包<!-- 文件上传 --><dependency> <groupId>comm...

 编辑

Spring+SpringMVC+Mybatis(开发必备技能)03、图片上传

目录

Spring+SpringMVC+Mybatis(开发必备技能)03、图片上传

1、pom.xml引包

2、在webapp下创建【imgs】文件夹用作存储图片

3、控制器编码:

4、视图层编码:

5、执行测试:



1、pom.xml引包

<!-- 文件上传 -->
<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>

引完包一定要刷一下。

编辑

在加入spring-mvc.xml文件中加上一下编码: 

编辑

    <!--配置文件上传解析器-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8"/>
        <!-- 限制一下文件大小,大概5M -->
        <property name="maxUploadSize" value="5000000"/>
    </bean>

2、在webapp下创建【imgs】文件夹用作存储图片

里面至少放置1张图片或其它,否则tomcat在执行中不会创建【imgs】空文件夹 

编辑


3、控制器编码:

新建【UploadController.java】文件

编辑

package com.item.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

@Controller
@CrossOrigin
public class UploadController {
    /**
     * 上传页面接口
     * @return
     */
    @GetMapping(value = "/UploadPage")
    public String UploadPage(){
        return "UploadPage";
    }

    /**
     * 上传接口
     * @param img
     * @param request
     * @param model
     * @return
     */
    @PostMapping(value = "/UploadPageApi")
    public String UploadPageApi(
            MultipartFile img,
            HttpServletRequest request,
            Model model){
        if(img.getSize()>0){
            String realPath = request.getSession().getServletContext().getRealPath("imgs/");
            String fileName = UUID.randomUUID()+".jpg";
            String path=realPath+fileName;
            File file=new File(path);
            try {
                img.transferTo(file);
            } catch (IOException e) {
                e.printStackTrace();
            }
            model.addAttribute("imgSrc",fileName);
            return "ShowImg";
        }
        return "/UploadPage";
    }
}

4、视图层编码:

【UploadPage.jsp】

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/5/26 0026
  Time: 16:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>文件上传页面</title>
</head>
<body>
<form action="/UploadPageApi" method="post" enctype="multipart/form-data">
    <p>
        <input type="file" name="img"/>
    </p>
    <p>
        <input type="submit" value="上传图片"/>
    </p>
</form>
</body>
</html>

【ShowImg.jsp】

这里我单独加了个【basePath】用作获取服务器绝对路径。

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/5/26 0026
  Time: 15:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>显示图片</title>
</head>
<body>
<% String imgSrc=(String)request.getAttribute("imgSrc");%>
<img src="<%=basePath%>imgs/<%=imgSrc%>"/>
</body>
</html>

5、执行测试:

http://localhost:8088/UploadPage

编辑

选择一张图片:

编辑

上传成功编辑

 如果要存储到数据库里面,直接存储UUID的文件名称即可。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200