基于OSS文件多线程分片上传及进度条实现

最新推荐文章于 2024-08-06 11:45:08 发布

HelloColourful

最新推荐文章于 2024-08-06 11:45:08 发布

阅读量7k

点赞数 5

文章标签： springboot OSS 进度条文件分片上传多线程

本文链接：https://blog.csdn.net/qq_40274351/article/details/89300605

版权

最近要做一个类似于百度网盘的项目，利用阿里云所提供的对象存储服务OSS实现文件上传功能，并实现进度条展示。本人小白一枚，参考了网上许多人的代码和阿里云提供的文档，做了好几天，做得也比较粗糙，请多多指教。

最终效果如图

上传页面：

进度条模态框：

项目环境：springboot+bootstrap+oss接口+lombok

pom.xml相关的dependency

<!--阿里云OSS-->
		<dependency>
			<groupId>com.aliyun.oss</groupId>
			<artifactId>aliyun-sdk-oss</artifactId>
			<version>3.4.2</version>
		</dependency>
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>
		<!--引入lombok包-->
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.16.18</version>
			<scope>provided</scope><!--只在编译阶段生效，不需要打入包中-->
		</dependency>
		<!--进度条监听-->
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>
		<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.5</version>
		</dependency>

前端页面代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>【基于OSS的上传文件页面】</title>
    <script type="text/javascript" src="../static/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css"  media="all">
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #group{
            position: absolute;
            left:580px;
        }
        #submit{
            position: absolute;
            top:140px;
            left:580px;
        }
    </style>
</head>
<body>
<div align="center">
    <h2 style="color:orangered;">基于OSS的上传文件页面</h2>
</div>
<br/>
<form id="fileForm" action="uploadFile"  enctype="multipart/form-data" method="post">
    <div class="form-group" id="group">
        <label for="exampleInputFile" id="msg">File input</label>
        <input type="file" id="exampleInputFile" name="file">
    </div>
    <button type="submit"  onclick="interval()" class="btn btn-default" id="submit" data-toggle="modal"  data-target="#myModal">上传</button>
</form>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal