10_SpringMVC_上传

╰半夏微凉° 2023-09-27 13:28 71阅读 0赞

随着我们互联网的发展，我们的用户从直接访问网站获取信息。变为希望将自己本地的资源发送给服务器，让服务器提供给其他人使用或者查看。还有部分的用户希望可以将本地的资源上传服务器存储起来，然后再其他的电脑中可以通过访问网站来获取上传的资源，这样用户就可以打破空间的局限性，再任何时候只要有网有电脑就可以对自己的资源进行操作，比如:云存储，云编辑

![c74d7d19c3f399f13fee5486b97f17f4.png][]

1如何在页面中显示一个按钮

用户可以点击该按钮后选择本地要上传的文件在页面中使用input标签，type值设置为”file”即可

2确定上传请求的发送方式

上传成功后的响应结果在当前页面显示，使用ajax请求来完成资源的发送

3上传请求的请求数据及其数据格式

请求数据:

上传的文件本身普通数据:用户名，Id，密码等，建议上传功能中不携带除上传资源以外的数据

数据格式:

传统的请求中，请求数据是以键值对的格式来发送给后台服务器的，但是在上传请求中，没有任何一个键可以描述上次的数据，因为数据本身是非常大的键就相当于一个变量，我们使用一个变量存储一个10g的电影显然是不可能 的。在上传请求中，将请求数据以二进制流的方式发送给服务器。

4在ajax中如何发送二进制流数据给服务器

① 创建FormData的对象，将请求数据存储到该对象中发送

② 将processData属性的值设置为false，告诉浏览器发送对象请求数据

③ 将contentType属性的值设置为false，设置请求数据的类型为二进制类型。

④ 正常发送ajax即可

![f7b066d70c1ea14c7d492e0bb9bd62a6.png][]

5上传成功后后台服务器应该响应什么结果给浏览器

并且浏览器如何处理后台服务器处理完成后，响应一个json对象给浏览器，示例格式如下:

\{ state:true,msg:“服务器繁忙”,url:”上传成功的资源的请求地址”\}

6 文件上传依赖的jar

<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>

7 配置文件上传组件

<bean 
                                                                                    id="multipartResolver" 
                                                                                    class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>

准备用户表

![d2abb1bc8a33123154b967dcce963fc3.png][]

![f140fdacc77335ce4749ae40af80de56.png][]

前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#uploadFile").click(function(){
                    // 获取要上传的文件
                    var photoFile =$("#photo")[0].files[0]
                    if(photoFile==undefined){
                        alert("您还未选中文件")
                        return;
                    }
                    // 将文件装入FormData对象
                    var formData =new FormData();
                    formData.append("headPhoto",photoFile)
                    // ajax向后台发送文件
                    $.ajax({
                        type:"post",
                        data:formData,
                        url:"fileUpload.do",
                        processData:false,
                        contentType:false,
                        success:function(result){
                            // 接收后台响应的信息
                            console.log(result)
                            // 图片回显
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <form action="addPlayer" method="get">
            <p>账号<input type="text" name="name"></p>
            <p>密码<input type="text" name="password"></p>
            <p>昵称<input type="text" name="nickname"></p>
            <p>头像:
                <br/>
                <input id="photo" type="file">
                <a id="uploadFile" href="javascript:void(0)">立即上传</a>
            </p>
            <p><input type="submit" value="注册"></p>
        </form>
    </body>
    </html>

controller代码

![e853c3f5d1cf7df4a678d4b9a4e49da7.png][]

文件上传中的几个问题

1 中文文件名编码问题:

已经通过过滤器解决

2 文件位置存储问题

放在当前项目下,作为静态资源,这样可以通过URL访问

在SpringMVC中配置静态资源放行

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

3 文件名冲突问题

使用UUID对文件名进行重命名

![47e43d69ef666f0c1f089319f3454018.png][]

4 控制文件类型

5 控制文件大小

package com.msb.controller;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    import javax.servlet.http.HttpServletRequest;
    import java.io.File;
    import java.io.IOException;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.UUID;
    /**
     * @Author: Ma HaiYang
     * @Description: MircoMessage:Mark_7001
     */
    @Controller
    public class FileUploadController {
        @ResponseBody
        @RequestMapping("fileUpload.do")
        public Map<String,String> fileUpload(MultipartFile headPhoto, HttpServletRequest req) throws IOException {
            Map<String,String> map=new HashMap<>();
            // 控制文件大小
            if(headPhoto.getSize()>1024*1024*5){
                map.put("message", "文件大小不能超过5M");
                return map;
            }
            // 指定文件存储目录为我们项目部署环境下的upload目录
            String realPath = req.getServletContext().getRealPath("/upload");
            File dir = new File(realPath);
            // 如果不存在则创建目录
            if(!dir.exists()){
                dir.mkdirs();
            }
            // 获取文件名
            String originalFilename = headPhoto.getOriginalFilename();
            // 避免文件名冲突,使用UUID替换文件名
            String uuid = UUID.randomUUID().toString();
            // 获取拓展名
            String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
            //  控制文件类型
            if(!extendsName.equals(".jpg")){
                map.put("message", "文件类型必须是.jpg");
                return map;
            }
            // 新的文件名
            String newFileName=uuid.concat(extendsName);
            // 文件存储位置
            File file =new File(dir,newFileName);
            //  文件保存
            headPhoto.transferTo(file);
            // 上传成功之后,把文件的名字和文件的类型返回给浏览器
            map.put("message", "上传成功");
            map.put("newFileName", newFileName);
            map.put("filetype", headPhoto.getContentType());
            return map;
        }
    }

通过文件上传解析组件控制

但是会出现异常,后期可以可以配置一个异常解析器解决

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            
            <property name="maxUploadSizePerFile" value="10"></property>
        </bean>

6 上传图片回显问题

后天已经将图片的文件名响应给浏览器

前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#uploadFile").click(function(){
                    // 获取要上传的文件
                    var photoFile =$("#photo")[0].files[0]
                    if(photoFile==undefined){
                        alert("您还未选中文件")
                        return;
                    }
                    // 将文件装入FormData对象
                    var formData =new FormData();
                    formData.append("headPhoto",photoFile)
                    // ajax向后台发送文件
                    $.ajax({
                        type:"post",
                        data:formData,
                        url:"fileUpload.do",
                        processData:false,
                        contentType:false,
                        success:function(result){
                            // 接收后台响应的信息
                            alert(result.message)
                            // 图片回显
                            $("#headImg").attr("src","upload/"+result.newFileName);
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <form action="addPlayer" method="get">
            <p>账号<input type="text" name="name"></p>
            <p>密码<input type="text" name="password"></p>
            <p>昵称<input type="text" name="nickname"></p>
            <p>头像:
                <br/>
                <input id="photo" type="file">
                <br/>
                <img id="headImg" style="width: 200px;height: 200px" alt="你还未上传图片">
                <br/>
                <a id="uploadFile" href="javascript:void(0)">立即上传</a>
            </p>
            <p><input type="submit" value="注册"></p>
        </form>
    </body>
    </html>

7 进度条问题

[jQuery.ajax文件上传进度条 - 吴琼 - 博客园][jQuery.ajax_ - _ -]

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <style>
            .progress {
                width: 200px;
                height: 10px;
                border: 1px solid #ccc;
                border-radius: 10px;
                margin: 10px 0px;
                overflow: hidden;
            }
            /* 初始状态设置进度条宽度为0px */
            .progress > div {
                width: 0px;
                height: 100%;
                background-color: yellowgreen;
                transition: all .3s ease;
            }
        </style>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#uploadFile").click(function(){
                    // 获取要上传的文件
                    var photoFile =$("#photo")[0].files[0]
                    if(photoFile==undefined){
                        alert("您还未选中文件")
                        return;
                    }
                    // 将文件装入FormData对象
                    var formData =new FormData();
                    formData.append("headPhoto",photoFile)
                    // ajax向后台发送文件
                    $.ajax({
                        type:"post",
                        data:formData,
                        url:"fileUpload.do",
                        processData:false,
                        contentType:false,
                        success:function(result){
                            // 接收后台响应的信息
                            alert(result.message)
                            // 图片回显
                            $("#headImg").attr("src","upload/"+result.newFileName);
                        },
                        xhr: function() {
                            var xhr = new XMLHttpRequest();
                            //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                            xhr.upload.addEventListener('progress', function (e) {
                                //loaded代表上传了多少
                                //total代表总数为多少
                                var progressRate = (e.loaded / e.total) * 100 + '%';
                                //通过设置进度条的宽度达到效果
                                $('.progress > div').css('width', progressRate);
                            })
                            return xhr;
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <form action="addPlayer" method="get">
            <p>账号<input type="text" name="name"></p>
            <p>密码<input type="text" name="password"></p>
            <p>昵称<input type="text" name="nickname"></p>
            <p>头像:
                <br/>
                <input id="photo" type="file">
                <%--图片回显--%>
                <br/>
                <img id="headImg" style="width: 200px;height: 200px" alt="你还未上传图片">
                <br/>
               <%--进度条--%>
                <div class="progress">
                    <div></div>
                </div>
                <a id="uploadFile" href="javascript:void(0)">立即上传</a>
            </p>
            <p><input type="submit" value="注册"></p>
        </form>
    </body>
    </html>

8 单独准备文件存储服务器

####  ####

分服务器上传作用

数据库服务器：运行我们的数据库

缓存和消息服务器：负责处理大并发访问的缓存和消息

文件服务器：负责存储用户上传文件的服务器。

应用服务器：负责部署我们的应用

在实际开发中，我们会有很多处理不同功能的服务器。(注意：此处说的不是服务器集群）

总结：分服务器处理的目的是让服务器各司其职，从而提高我们项目的运行效率。

分服务器工作示意图

![44b222ca16e584202d21af72e025f1f1.png][]

单独解压一个Tomcat作为文件服务器

![cdc33712d750317b20af01311b635c79.png][]

设置远程服务器端口号

![21219e453689589475ede76683fbbc01.png][]

![21692fb14aca693855bbe64dff09d59e.png][]

远程服务器中设置非只读

![216803a749b42afe2345d90e40ee5634.png][]

webapps下创建一个upload目录

![e92c37f5fdf6da0be4d5bab12edc7cf5.png][]

启动测试

![1a860eb42dc71a433c962c6be5873ec9.png][]

项目中导入依赖

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

controller代码

package com.msb.controller;
    import com.sun.jersey.api.client.Client;
    import com.sun.jersey.api.client.WebResource;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    import javax.servlet.http.HttpServletRequest;
    import java.io.File;
    import java.io.IOException;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.UUID;
    /**
     * @Author: Ma HaiYang
     * @Description: MircoMessage:Mark_7001
     */
    @Controller
    public class FileUploadController {
        // 文件存储位置
        private final static String FILESERVER="http://192.168.8.109:8090/upload/";
        @ResponseBody
        @RequestMapping("fileUpload.do")
        public Map<String,String> fileUpload(MultipartFile headPhoto, HttpServletRequest req) throws IOException {
            Map<String,String> map=new HashMap<>();
            // 获取文件名
            String originalFilename = headPhoto.getOriginalFilename();
            // 避免文件名冲突,使用UUID替换文件名
            String uuid = UUID.randomUUID().toString();
            // 获取拓展名
            String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
            // 新的文件名
            String newFileName=uuid.concat(extendsName);
            // 创建 sun公司提供的jersey包中的client对象
            Client client=Client.create();
            WebResource resource = client.resource(FILESERVER + newFileName);
            //  文件保存到另一个服务器上去了
            resource.put(String.class, headPhoto.getBytes());
            // 上传成功之后,把文件的名字和文件的类型返回给浏览器
            map.put("message", "上传成功");
            map.put("newFileName",newFileName);
            map.put("filetype", headPhoto.getContentType());
            return map;
        }
    }

页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <style>
            .progress {
                width: 200px;
                height: 10px;
                border: 1px solid #ccc;
                border-radius: 10px;
                margin: 10px 0px;
                overflow: hidden;
            }
            /* 初始状态设置进度条宽度为0px */
            .progress > div {
                width: 0px;
                height: 100%;
                background-color: yellowgreen;
                transition: all .3s ease;
            }
        </style>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#uploadFile").click(function(){
                    // 获取要上传的文件
                    var photoFile =$("#photo")[0].files[0]
                    if(photoFile==undefined){
                        alert("您还未选中文件")
                        return;
                    }
                    // 将文件装入FormData对象
                    var formData =new FormData();
                    formData.append("headPhoto",photoFile)
                    // ajax向后台发送文件
                    $.ajax({
                        type:"post",
                        data:formData,
                        url:"fileUpload.do",
                        processData:false,
                        contentType:false,
                        success:function(result){
                            // 接收后台响应的信息
                            alert(result.message)
                            // 图片回显
                            $("#headImg").attr("src","http://192.168.8.109:8090/upload/"+result.newFileName);
                          
                        },
                        xhr: function() {
                            var xhr = new XMLHttpRequest();
                            //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                            xhr.upload.addEventListener('progress', function (e) {
                                //loaded代表上传了多少
                                //total代表总数为多少
                                var progressRate = (e.loaded / e.total) * 100 + '%';
                                //通过设置进度条的宽度达到效果
                                $('.progress > div').css('width', progressRate);
                            })
                            return xhr;
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <form action="addPlayer" method="get">
            <p>账号<input type="text" name="name"></p>
            <p>密码<input type="text" name="password"></p>
            <p>昵称<input type="text" name="nickname"></p>
            <p>头像:
                <br/>
                <input id="photo" type="file">
                <%--图片回显--%>
                <br/>
                <img id="headImg" style="width: 200px;height: 200px" alt="你还未上传图片">
                <br/>
               <%--进度条--%>
                <div class="progress">
                    <div></div>
                </div>
                <a id="uploadFile" href="javascript:void(0)">立即上传</a>
                
            </p>
            <p><input type="submit" value="注册"></p>
        </form>
    </body>
    </html>

9 保存完整player信息进入数据库

index.html

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <style>
            .progress {
                width: 200px;
                height: 10px;
                border: 1px solid #ccc;
                border-radius: 10px;
                margin: 10px 0px;
                overflow: hidden;
            }
            /* 初始状态设置进度条宽度为0px */
            .progress > div {
                width: 0px;
                height: 100%;
                background-color: yellowgreen;
                transition: all .3s ease;
            }
        </style>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#uploadFile").click(function(){
                    // 获取要上传的文件
                    var photoFile =$("#photo")[0].files[0]
                    if(photoFile==undefined){
                        alert("您还未选中文件")
                        return;
                    }
                    // 将文件装入FormData对象
                    var formData =new FormData();
                    formData.append("headPhoto",photoFile)
                    // ajax向后台发送文件
                    $.ajax({
                        type:"post",
                        data:formData,
                        url:"fileUpload.do",
                        processData:false,
                        contentType:false,
                        success:function(result){
                            // 接收后台响应的信息
                            alert(result.message)
                            // 图片回显
                            $("#headImg").attr("src","http://192.168.8.109:8090/upload/"+result.newFileName);
                            // 将文件类型和文件名放入form表单
                            $("#photoInput").val(result.newFileName)
                            $("#filetypeInput").val(result.filetype)
                        },
                        xhr: function() {
                            var xhr = new XMLHttpRequest();
                            //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                            xhr.upload.addEventListener('progress', function (e) {
                                //loaded代表上传了多少
                                //total代表总数为多少
                                var progressRate = (e.loaded / e.total) * 100 + '%';
                                //通过设置进度条的宽度达到效果
                                $('.progress > div').css('width', progressRate);
                            })
                            return xhr;
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <form action="addPlayer" method="get">
            <p>账号<input type="text" name="name"></p>
            <p>密码<input type="text" name="password"></p>
            <p>昵称<input type="text" name="nickname"></p>
            <p>头像:
                <br/>
                <input id="photo" type="file">
                <%--图片回显--%>
                <br/>
                <img id="headImg" style="width: 200px;height: 200px" alt="你还未上传图片">
                <br/>
               <%--进度条--%>
                <div class="progress">
                    <div></div>
                </div>
                <a id="uploadFile" href="javascript:void(0)">立即上传</a>
                <%--使用隐藏的输入框存储文件名称和文件类型--%>
                <input id="photoInput"  type="hidden" name="photo" >
                <input id="filetypeInput"  type="hidden" name="filetype">
            </p>
            <p><input type="submit" value="注册"></p>
        </form>
    </body>
    </html>

FileUploadController代码

见上一步

playerController代码

package com.msb.controller;
    import com.msb.pojo.Player;
    import com.msb.service.PlayerService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    /**
     * @Author: Ma HaiYang
     * @Description: MircoMessage:Mark_7001
     */
    @Controller
    public class PlayerController  {
        @Autowired
        private PlayerService playerService;
        @RequestMapping("addPlayer")
        public String addPlayer(Player player){
            // 调用服务层方法,将数据保存进入数据库
            playerService.addPlayer(player);
            // 页面跳转至player信息展示页
            return "redirect:/showPlayer.jsp";
        }
    }

Service层代码

package com.msb.service.impl;
    import com.msb.mapper.PlayerMapper;
    import com.msb.pojo.Player;
    import com.msb.service.PlayerService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    /**
     * @Author: Ma HaiYang
     * @Description: MircoMessage:Mark_7001
     */
    @Service
    public class PlayerServiceImpl implements PlayerService {
        @Autowired
        private PlayerMapper playerMapper;
        @Override
        public boolean addPlayer(Player player) {
            return playerMapper.addPlayer(player)>0;
        }
    }

mapper代码

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper
            PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.msb.mapper.PlayerMapper">
        <insert id="addPlayer">
            insert into player values(DEFAULT ,#{name},#{password},#{nickname},#{photo},#{filetype})
        </insert>
    </mapper>

[c74d7d19c3f399f13fee5486b97f17f4.png]: https://img-blog.csdnimg.cn/img_convert/c74d7d19c3f399f13fee5486b97f17f4.png
[f7b066d70c1ea14c7d492e0bb9bd62a6.png]: https://img-blog.csdnimg.cn/img_convert/f7b066d70c1ea14c7d492e0bb9bd62a6.png
[d2abb1bc8a33123154b967dcce963fc3.png]: https://img-blog.csdnimg.cn/img_convert/d2abb1bc8a33123154b967dcce963fc3.png
[f140fdacc77335ce4749ae40af80de56.png]: https://img-blog.csdnimg.cn/img_convert/f140fdacc77335ce4749ae40af80de56.png
[e853c3f5d1cf7df4a678d4b9a4e49da7.png]: https://img-blog.csdnimg.cn/img_convert/e853c3f5d1cf7df4a678d4b9a4e49da7.png
[47e43d69ef666f0c1f089319f3454018.png]: https://img-blog.csdnimg.cn/img_convert/47e43d69ef666f0c1f089319f3454018.png
[jQuery.ajax_ - _ -]: https://www.cnblogs.com/wuyu1787/p/8919588.html
[44b222ca16e584202d21af72e025f1f1.png]: https://img-blog.csdnimg.cn/img_convert/44b222ca16e584202d21af72e025f1f1.png
[cdc33712d750317b20af01311b635c79.png]: https://img-blog.csdnimg.cn/img_convert/cdc33712d750317b20af01311b635c79.png
[21219e453689589475ede76683fbbc01.png]: https://img-blog.csdnimg.cn/img_convert/21219e453689589475ede76683fbbc01.png
[21692fb14aca693855bbe64dff09d59e.png]: https://img-blog.csdnimg.cn/img_convert/21692fb14aca693855bbe64dff09d59e.png
[216803a749b42afe2345d90e40ee5634.png]: https://img-blog.csdnimg.cn/img_convert/216803a749b42afe2345d90e40ee5634.png
[e92c37f5fdf6da0be4d5bab12edc7cf5.png]: https://img-blog.csdnimg.cn/img_convert/e92c37f5fdf6da0be4d5bab12edc7cf5.png
[1a860eb42dc71a433c962c6be5873ec9.png]: https://img-blog.csdnimg.cn/img_convert/1a860eb42dc71a433c962c6be5873ec9.png