SpringBoot框架——SpringBoot_文件上传

最新推荐文章于 2024-11-04 09:46:46 发布

隔绝知识的饭桶

最新推荐文章于 2024-11-04 09:46:46 发布

阅读量283

点赞数

文章标签： spring boot

本文链接：https://blog.csdn.net/m0_68519425/article/details/131154302

版权

导入依赖

1.	<dependency>
2.	  <groupId>com.sun.jersey</groupId>
3.	  <artifactId>jersey-client</artifactId>
4.	  <version>1.19</version>
5.	</dependency>

页面代码

1.	<html>
2.	<head>
3.	    <meta charset="UTF-8">
4.	    <title>Title</title>
5.	    <style>
6.	        .progress {
7.	            width: 200px;
8.	            height: 10px;
9.	            border: 1px solid #ccc;
10.	            border-radius: 10px;
11.	            margin: 10px 0px;
12.	            overflow: hidden;
13.	        }
14.	        /* 初始状态设置进度条宽度为0px */
15.	        .progress > div {
16.	            width: 0px;
17.	            height: 100%;
18.	            background-color: yellowgreen;
19.	            transition: all .3s ease;
20.	        }
21.	    </style>
22.	    <script type="text/javascript" src="js/jquery.min.js"></script>
23.	    <script type="text/javascript">
24.	        $(function(){
25.	            $("#uploadFile").click(function(){
26.	                // 获取要上传的文件
27.	                var photoFile =$("#photo")[0].files[0]
28.	                if(photoFile==undefined){
29.	                    alert("您还未选中文件")
30.	                    return;
31.	                }
32.	                // 将文件装入FormData对象
33.	                var formData =new FormData();
34.	                formData.append("headPhoto",photoFile)
35.	                // ajax向后台发送文件
36.	                $.ajax({
37.	                    type:"post",
38.	                    data:formData,
39.	                    url:"file/upload",
40.	                    processData:false,
41.	                    contentType:false,
42.	                    success:function(result){
43.	                        // 接收后台响应的信息
44.	                        alert(result.message)
45.	                        // 图片回显
46.	                        $("#headImg").attr("src",result.newFileName);
47.	                    },
48.	                    xhr: function() {
49.	                        var xhr = new XMLHttpRequest();
50.	                        //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
51.	                        xhr.upload.addEventListener('progress', function (e) {
52.	                            //loaded代表上传了多少
53.	                            //total代表总数为多少
54.	                            var progressRate = (e.loaded / e.total) * 100 + '%';
55.	                            //通过设置进度条的宽度达到效果
56.	                            $('.progress > div').css('width', progressRate);
57.	                        })
58.	                        return xhr;
59.	                    }
60.	                })
61.	            })
62.	        })
63.	    </script>
64.	</head>
65.	<body>
66.	<form action="addPlayer" method="get">
67.	    <p>账号<input type="text" name="name"></p>
68.	    <p>密码<input type="text" name="password"></p>
69.	    <p>昵称<input type="text" name="nickname"></p>
70.	    <p>头像:
71.	        <br/>
72.	        <input id="photo" type="file">
73.	        <br/>
74.	        <img id="headImg" style="width: 200px;height: 200px" alt="你还未上传图片">
75.	        <br/>
76.	        <div class="progress">
77.	            <div></div>
78.	        </div>
79.	        <a id="uploadFile" href="javascript:void(0)">立即上传</a>
80.	    </p>
81.	    <p><input type="submit" value="注册"></p>
82.	</form>
83.	</body>
84.	</html>

Controller代码

1.	package com.msb.controller;
2.	
3.	import com.sun.jersey.api.client.Client;
4.	import com.sun.jersey.api.client.WebResource;
5.	import org.springframework.stereotype.Controller;
6.	import org.springframework.web.bind.annotation.RequestMapping;
7.	import org.springframework.web.bind.annotation.ResponseBody;
8.	import org.springframework.web.multipart.MultipartFile;
9.	
10.	import javax.servlet.http.HttpServletRequest;
11.	import java.io.File;
12.	import java.io.IOException;
13.	import java.util.HashMap;
14.	import java.util.Map;
15.	import java.util.UUID;
16.	
17.	/**
18.	 * @Author: Ma HaiYang
19.	 * @Description: MircoMessage:Mark_7001
20.	 */
21.	@Controller
22.	@RequestMapping("/file")
23.	public class FileController {
24.	
25.	    // 文件存储位置
26.	    private final static String FILESERVER="http://127.0.0.1:8090/upload/";
27.	
28.	    @RequestMapping("/upload")
29.	    @ResponseBody
30.	    public Map<String,String> upload(MultipartFile headPhoto, HttpServletRequest req) throws IOException {
31.	        Map<String,String> map=new HashMap<>();
32.	
33.	        // 指定文件存储目录为我们项目部署环境下的upload目录
34.	        String realPath = req.getServletContext().getRealPath("/upload");
35.	        File dir = new File(realPath);
36.	        // 如果不存在则创建目录
37.	        if(!dir.exists()){
38.	            dir.mkdirs();
39.	        }
40.	        // 获取文件名
41.	        String originalFilename = headPhoto.getOriginalFilename();
42.	        // 避免文件名冲突,使用UUID替换文件名
43.	        String uuid = UUID.randomUUID().toString();
44.	        // 获取拓展名
45.	        String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
46.	        // 新的文件名
47.	        String newFileName=uuid.concat(extendsName);
48.	        // 创建 sun公司提供的jersey包中的client对象
49.	        Client client=Client.create();
50.	        WebResource resource = client.resource(FILESERVER + newFileName);
51.	        //  文件保存到另一个服务器上去了
52.	        resource.put(String.class, headPhoto.getBytes());
53.	        // 上传成功之后,把文件的名字和文件的类型返回给浏览器
54.	        map.put("message", "上传成功");
55.	        map.put("newFileName", FILESERVER+newFileName);
56.	        map.put("filetype", headPhoto.getContentType());
57.	        return map;
58.	    }
59.	}

yml中配置文件大小限制

1.	spring:
2.	  servlet:
3.	    multipart:
4.	      max-file-size: 10MB
5.	      max-request-size: 100MB

多文件同步上传处理方式

页面代码

1.	<form action="file/upload" method="post" enctype="multipart/form-data">
2.	    <p>账号<input type="text" name="name"></p>
3.	    <p>密码<input type="text" name="password"></p>
4.	    <p>昵称<input type="text" name="nickname"></p>
5.	    <p>头像:
6.	        <br/>
7.	        <input id="photo" name="photo"  type="file">
8.	        <input id="photos" name="photos"  type="file" multiple>
9.	        <br/>
10.	        <img id="headImg" style="width: 200px;height: 200px" alt="你还未上传图片">
11.	        <br/>
12.	    <div class="progress">
13.	        <div></div>
14.	    </div>
15.	    <a id="uploadFile" href="javascript:void(0)">立即上传</a>
16.	    </p>
17.	    <p><input type="submit" value="注册"></p>
18.	</form>

后台接收的处理单元参数处理

public Map<String,String> upload(String name,
2.	                                     String password,
3.	                                     String nickname,
4.	                                     @RequestPart("photo") MultipartFile photo,
5.	                                     @RequestPart("photos") MultipartFile[] photos, HttpServletRequest req)