SpringMVC--文件上传

最新推荐文章于 2022-05-25 23:24:14 发布

Aruba233

最新推荐文章于 2022-05-25 23:24:14 发布

阅读量457

点赞数

文章标签： java postman 前端开发语言测试工具

本文链接：https://blog.csdn.net/qq_24000367/article/details/124962485

版权

上篇SpringMVC--SSM整合中整合了SSM三大框架，并进行了接口的编写实现了数据库交互。在后台开发中常用的功能是文件上传，今天来实现后台的文件上传功能：将图片上传，并将服务器存储的文件路径返回给浏览器

一、项目配置

pom.xml中导入以下依赖：

<!--文件上传依赖-->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.8.0</version>
    </dependency>

SpringMVC配置文件中配置bean：

<!--文件上传解析组件-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>

创建数据库表：

create table player(
    id integer primary key auto_increment,
    name varchar(10),
    password varchar(10),
    nickname varchar(10),
    photo varchar(100),
    filetype varchar(50)
);

二、前端代码

根据数据库表字段准备几个input标签

<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            $("#upload").click(function () {
                var imgPath = $("#headImg")[0].files[0]
                if (imgPath == undefined) {
                    alert("请选择文件")
                    return
                }
                console.log(imgPath)
            })
        })
    </script>
</head>
<body>
<form>
    <p>用户名：<input type="text" name="name"></p>
    <p>密码：<input type="password" name="password"></p>
    <p>昵称：<input type="text" name="nickname"></p>
    <p>头像：<input id="headImg" type="file">
        <input type="button" id="upload" value="上传文件">
    </p>
    <input type="hidden" name="filetype">
    <input type="hidden" name="photo">
    <p><input type="submit" value="注册"></p>
</form>
</body>
</html>

界面效果：

三、后台业务代码

1. 上传文件功能

首先实现上传文件功能，并把文件路径返回给浏览器

编写Controller层代码：

@Controller
public class PlayerController {

    @RequestMapping("uploadImg.do")
    @ResponseBody
    public Map<String, Object> uploadImg(MultipartFile img, HttpServletRequest req) throws IOException {
        Map<String, Object> model = new HashMap<>();

        //将文件存放在部署的upload目录下
        File savePathFile = new File(req.getServletContext().getRealPath("upload"));
        System.out.println("存放路径：" + savePathFile.getAbsoluteFile());
        if (!savePathFile.exists()) {
            savePathFile.mkdirs();
        }

        System.out.println("OriginalFilename：" + img.getOriginalFilename());
        String suffix = img.getOriginalFilename().substring(img.getOriginalFilename().lastIndexOf('.'));
        System.out.println("suffix：" + suffix);
        if (!suffix.equalsIgnoreCase(".jpg")) {
            model.put("msg", "文件类型必须为jpg");
            return model;
        }

        //存放文件
        File saveFile = new File(savePathFile, UUID.randomUUID() + suffix);
        img.transferTo(saveFile);

        model.put("msg", "上传成功");
        model.put("filepath", "upload/" + saveFile.getName());
        model.put("filetype", img.getContentType());

        System.out.println("返回结果：" + model);

        return model;
    }
}

配置静态资源放行：

<mvc:resources mapping="/upload/**" location="/upload/"></mvc:resources>

2. 前端代码修改

js中使用ajax请求：

<script>
        $(function () {
            $("#upload").click(function () {
                var imgFile = $("#headImg")[0].files[0]
                if (imgFile == undefined) {
                    alert("请选择文件")
                    return
                }
                console.log(imgFile)

                var formdata = new FormData()
                formdata.append("img", imgFile)
                $.ajax({
                    type: "post",
                    data: formdata,
                    url: "uploadImg.do",
                    processData: false,
                    contentType: false,
                    success: function (ret) {
                        console.log(ret)
                    }
                })
            })
        })
    </script>

在页面中增加img标签，显示接口返回的图片，html完整代码：

<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            $("#upload").click(function () {
                var imgFile = $("#headImg")[0].files[0]
                if (imgFile == undefined) {
                    alert("请选择文件")
                    return
                }
                console.log(imgFile)

                var formdata = new FormData()
                formdata.append("img", imgFile)
                $.ajax({
                    type: "post",
                    data: formdata,
                    url: "uploadImg.do",
                    processData: false,
                    contentType: false,
                    success: function (ret) {
                        console.log(ret)
                        $("#head").attr("src", ret.filepath)
                    }
                })
            })
        })
    </script>

    <style>
        #head {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<form>
    <p>用户名：<input type="text" name="name"></p>
    <p>密码：<input type="password" name="password"></p>
    <p>昵称：<input type="text" name="nickname"></p>
    <p>头像：<input id="headImg" type="file">
        <input type="button" id="upload" value="上传文件">
    </p>
    <p><img id="head" alt="未选择图片"></p>
    <input type="hidden" name="filetype">
    <input type="hidden" name="photo">
    <p><input type="submit" value="注册"></p>
</form>
</body>
</html>

测试结果：

四、文件服务器

一般文件交由专门的服务器进行保存，重新配置一个tomcat，把它模拟文件服务器

1. 修改文件服务器tomcat的端口

打开conf目录下的web.xml，将端口改为8006和8082：

<Server port="8006" shutdown="SHUTDOWN">
...
    <Connector port="8082" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />
...

2. 设置资源只读

打开同目录下的web.xml，将servlet初始参数readonly配置为false

<servlet>
        <servlet-name>default</servlet-name>
        <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>0</param-value>
        </init-param>
        <init-param>
            <param-name>listings</param-name>
            <param-value>false</param-value>
        </init-param>
        <init-param>
            <param-name>readonly</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

3. 创建文件存放目录

webapp目录下新建upload文件夹：

启动测试：

4. 项目中添加依赖

<dependency>
            <groupId>com.sun.jersey</groupId>
            <artifactId>jersey-client</artifactId>
            <version>1.19</version>
        </dependency>

5. Controller层进行转存

@Controller
public class PlayerController {
    // 文件存储位置
    private final static String FILESERVER = "http://localhost:8082/upload/";

    @RequestMapping("uploadImg.do")
    @ResponseBody
    public Map<String, Object> uploadImg(MultipartFile img, HttpServletRequest req) throws IOException {
        Map<String, Object> model = new HashMap<>();

        //将文件存放在部署的upload目录下
//        File savePathFile = new File(req.getServletContext().getRealPath("upload"));
//        System.out.println("存放路径：" + savePathFile.getAbsoluteFile());
//        if (!savePathFile.exists()) {
//            savePathFile.mkdirs();
//        }

        System.out.println("OriginalFilename：" + img.getOriginalFilename());
        String suffix = img.getOriginalFilename().substring(img.getOriginalFilename().lastIndexOf('.'));
        System.out.println("suffix：" + suffix);
        if (!suffix.equalsIgnoreCase(".jpg")) {
            model.put("msg", "文件类型必须为jpg");
            return model;
        }


        String saveFileName = UUID.randomUUID() + suffix;
//        //存放文件
//        File saveFile = new File(savePathFile, saveFileName);
//        img.transferTo(saveFile);

        // 创建sun公司提供的jersey包中的client对象
        Client client = Client.create();
        WebResource resource = client.resource(FILESERVER + saveFileName);
        // 将文件保存到另一个服务器
        resource.put(String.class, img.getBytes());

        model.put("msg", "上传成功");
//        model.put("filepath", "upload/" + saveFileName);
        model.put("filepath", FILESERVER + saveFileName);
        model.put("filetype", img.getContentType());

        System.out.println("返回结果：" + model);

        return model;
    }
}

测试结果：
另一个tomcat成功接收到文件

界面也正常显示了文件服务器的图片：

项目地址：

https://gitee.com/aruba/spring-mvcstudy.git

Aruba233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC--文件上传

上篇SpringMVC--SSM整合中整合了SSM三大框架，并进行了接口的编写实现了数据库交互。在后台开发中常用的功能是文件上传，今天来实现后台的文件上传功能：将图片上传，并将服务器存储的文件路径返回给浏览器一、项目配置pom.xml中导入以下依赖： <dependency> <groupId>commons-...
复制链接

扫一扫