03_SpringBoot_文件上传

最新推荐文章于 2024-08-05 15:27:17 发布

BookerABC

最新推荐文章于 2024-08-05 15:27:17 发布

阅读量84

点赞数

分类专栏： SpringBoot 文章标签： spring boot javascript 前端

本文链接：https://blog.csdn.net/booker009/article/details/128512850

版权

SpringBoot 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

该文章展示了如何在JavaSpringBoot应用中实现文件上传功能，包括单文件和多文件上传。使用jersey-client库进行文件传输，前端利用ajax监听上传进度，并用jQuery处理用户交互。同时，后端控制器接收MultipartFile对象，文件上传后重命名并保存至服务器，还配置了文件大小限制。

摘要由CSDN通过智能技术生成

创建项目:略

启动文件上传服务器:略

导入依赖

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

页面代码

<html>
<head>
    <meta charset="UTF-8">
    <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:"file/upload",
                    processData:false,
                    contentType:false,
                    success:function(result){
                        // 接收后台响应的信息
                        alert(result.message)
                        // 图片回显
                        $("#headImg").attr("src",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>

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
@RequestMapping("/file")
public class FileController {
    // 文件存储位置
    private final static String FILESERVER="http://127.0.0.1:8090/upload/";
    @RequestMapping("/upload")
    @ResponseBody
    public Map<String,String> upload(MultipartFile headPhoto, HttpServletRequest req) throws IOException {
        Map<String,String> map=new HashMap<>();
        // 指定文件存储目录为我们项目部署环境下的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("."));
        // 新的文件名
        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", FILESERVER+newFileName);
        map.put("filetype", headPhoto.getContentType());
        return map;
    }
}

yml中配置文件大小限制

spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 100MB

多文件同步上传处理方式

页面代码

<form action="file/upload" method="post" enctype="multipart/form-data">
    <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" name="photo"  type="file">
        <input id="photos" name="photos"  type="file" multiple>
        <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>

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

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