SpringBoot-实现异步文件上传

最新推荐文章于 2024-09-19 16:25:54 发布

喝汽水的猫^

最新推荐文章于 2024-09-19 16:25:54 发布

阅读量2.4k

点赞数 2

本文链接：https://blog.csdn.net/javaeEEse/article/details/117769926

版权

spring boot 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文章目录

一、异步实现文件上传？
- 1.准单独解压一个Tomcat作为文件服务器
- 1.项目构建

一、异步实现文件上传？

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

**加粗样式**
在这里插入图片描述
2、设置远程服务器端口号：
在conf下的server.xml

3、远程服务器中设置非只读

4、webapps下创建一个upload目录

5、启动Tomocat测试

1.项目构建

1、项目结构图
在这里插入图片描述
2、导入相关依赖

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

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

3、regist.html前端代码

<!DOCTYPE html>
<html lang="en">
<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>

4、导入js文件
链接：https://pan.baidu.com/s/1Jo381D_kuWHvlrazHKYvtA
提取码：2959

5、编写后端代码

package com.jowell.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.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

/**
 * @Description: TODO
 * @Author: JoWell
 * @Date: 2021/6/10 9:39
 * @Version: v1.0
 */
@Controller
@RequestMapping("/file")
public class FileController {
    //文件存储位置
    private final static String FILEUPLOAD = "http://127.0.0.1:8090/upload/";

    @RequestMapping("/upload")
    @ResponseBody
    public Map<String, String> upload(MultipartFile headPhoto, HttpServletRequest request) 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(FILEUPLOAD + newFileName);
        
        //  文件保存到另一个服务器上去了
        resource.put(String.class, headPhoto.getBytes());
        
        // 上传成功之后,把文件的名字和文件的类型返回给浏览器
        map.put("message", "上传成功");
        map.put("newFileName", FILEUPLOAD+newFileName);
        map.put("filetype", headPhoto.getContentType());
        return map;
    }
}