upload-hub

一个支持多种存储方式的文件上传系统,提供简单易用的文件管理功能。

演示

ev

项目简介

本项目是一个基于前后端分离架构的文件上传系统,支持多种存储方式,包括本地存储、阿里云 OSS 和 MinIO。用户可以通过直观的界面上传文件并管理已上传的文件。

技术栈

  • 前端:
    • Vue 2
    • ElementUI
  • 后端:
    • JDK 1.8
    • Spring Boot 2.3.12.RELEASE
    • MySQL 8.0.26
    • MyBatis-Plus
  • 文件存储:
    • Local本地存储
    • OSS阿里云对象存储
    • MinIO分布式对象存储
    • 敬请期待。。。

功能特性

  • 断点续传
  • 文件分片
  • 文件校验
  • 文件秒传
  • 多文件上传
  • 支持多种存储方式切换
  • 文件预览图片、视频、PDF
  • 存储配置连接测试

预览

首页

首页

已上传文件 页面

已上传文件

上传设置

上传设置

存储配置

存储配置

文件预览

  • 图片

    图片预览

  • 视频

    视频预览

  • PDF

    PDF预览

快速开始

先决条件

在运行项目之前,请月报满足以下条件:

  • Java环境
    • JDK8或更高版本已安装
    • 环境变量JAVA_HOME已配置
  • Maven可选
    • 如果需要从源码构建安装Maven3.6+
  • 数据库:
    • SQLite无需额外安装默认使用文件数据库upload-file.db
    • MySQL可选需安装MySQL8.x并创建数据库upload-file
  • 命令行工具:
    • Windows 用户建议使用 PowerShell 或 CMD
    • Linux/Mac 用户使用终端即可

构建项目

前端

  1. 克隆项目到本地:

    git clone https://gitee.com/czh-dev/upload-hub.git
    cd upload-file-frontend
    
  2. 安装依赖:

    npm install
    
  3. 启动开发服务器:

    npm run serve
    
  4. 访问应用: 在浏览器中打开 http://localhost:8080

后端

  1. 进入后端目录:
cd upload-file-backend
  1. 配置环境:

    确保已安装 JDK 1.8 和 Maven。 在 application.yml 中配置数据库和存储服务参数(见下方配置说明)。

  2. 构建并运行:

mvn clean install
mvn spring-boot:run
  1. 接口地址: 默认运行在 http://localhost:10086

运行项目

下载 JAR 文件

Download upload-file-backend-1.0-SNAPSHOT.jar

默认模式SQLite

无需额外配置,直接运行,默认使用 SQLite 数据库:

java -jar upload-file-backend-1.0-SNAPSHOT.jar
  • 说明:
    • SQLite 数据库文件upload-file.db将自动创建在当前目录
    • 表结构和初始数据(如存储配置)会自动初始化
  • 日志输出(可选):
    • 启动后,检查日志是否有Using SQLite datasource

MySQL模式

如果你希望使用M有SQL数据库请按照以下步骤操作

  1. 准备MySQL数据库

    • 启动MySQL服务

    • 创建数据库

      CREATE DATABASE upload_file DEFAULT CHARACTER SET utf8mb4;
      
    • 导入项目sql目录中的upload-file.sql脚本

  2. 运行命令:

    使用以下命令启动,替换用户名和密码为你的 MySQL 配置(以下以 root/root 为例):

    java -jar upload-file-backend-1.0-SNAPSHOT.jar --mysql.datasource.url="jdbc:mysql://localhost:3306/upload-file?useSSL=false&serverTimezone=Asia/Shanghai" --mysql.datasource.username=root --mysql.datasource.password=root
    

默认端口

  • 服务默认运行在 10086 端口,可通过配置文件或参数修改:

    java -jar upload-file-backend-1.0-SNAPSHOT.jar --server.port=8080
    

目录结构

.
├── upload-file-backend           # 后端代码
│   ├── src                       # 源代码
│   └── data                      # 本地上传的数据文件
│   └── sql                       # SQL 脚本
│   └── pom.xml                   # Maven 配置文件
├── upload-file-frontend          # 前端代码
│   ├── src                       # 源代码
│   ├── public                    # 静态资源
│   └── package.json              # NPM 配置文件
└── README.md                     # 项目说明文档

前期准备

数据库

  1. 安装MySQL8.0或兼容版本

  2. 创建数据库upload_file

    CREATE DATABASE upload_file DEFAULT CHARACTER SET utf8mb4;
    
  3. 执行 sql 目录下的 SQL 脚本初始化表结构。

本地存储

  • 修改数据库配置(storage_config表):

    type=local

    • Bucket项目中data目录的绝对路径

MinIO

可选

创建MinIO容器

docker run -d --name upload-file \
  -p 9000:9000 \
  -p 9090:9090 \
  -e MINIO_ROOT_USER=minio \
  -e MINIO_ROOT_PASSWORD=minio123 \
  -v E:\develop\MinIO\data:/data \
  minio/minio server /data --console-address ":9090"
  • 访问地址:http://localhost:9000API / http://localhost:9090控制台

  • 默认凭证:用户名 minio密码 minio123

  • 存储路径:映射到本地 E:\develop\MinIO\dataWindows 示例,根据实际情况调整)。

  • 创建Bucket并且设置权限为public

  • 修改数据库配置(storage_config表):

    type=minio

OSS阿里云对象存储

可选

  1. 开通服务:

    • 登录 阿里云控制台 开通 OSS 服务。
    • 创建 Bucket如 upload-file-bucket
  2. 获取凭证:

    • 在「访问控制 RAM」中创建 AccessKey记录 AccessKey ID 和 AccessKey Secret。
  3. 设置跨域请求 (CORS)

    • 进入 OSS 控制台,找到目标 Bucket。
    • 在「基础设置」->「跨域设置」中添加规则:
    • 来源:*(或指定域名)
    • 允许 MethodsGET, POST, PUT
    • 允许 Headers*
    • 示例截图: img.png
  4. 修改数据库配置(storage_config表):

    type=oss

    • endpoint你的OSS外网访问地域节点OSS控制台概览处查看
    • access_key你的AccessKey ID
    • secret_key你的AccessKey Secret
    • bucket你的Bucket名称

配置说明

后端配置文件 (application.yml)

# 服务端配置
server:
  port: 10086  # 服务运行的端口号,默认值为 10086可通过 --server.port 参数覆盖,例如 --server.port=8080

# Spring 框架相关配置
spring:
  # 数据源配置,默认使用 SQLite
  datasource:
    url: jdbc:sqlite:./upload-file.db  # SQLite 数据库的连接 URL文件路径为当前目录下的 upload-file.db
    driver-class-name: org.sqlite.JDBC  # SQLite 的 JDBC 驱动类名,确保项目依赖中包含 sqlite-jdbc
  # 文件上传相关配置
  servlet:
    multipart:
      max-file-size: 500MB  # 单个上传文件的最大大小限制,设置为 500MB支持大文件上传
      max-request-size: 500MB  # 单次请求的最大大小限制,设置为 500MB与 max-file-size 保持一致
  # Spring 主配置
  main:
    allow-bean-definition-overriding: true  # 允许 Bean 定义覆盖,解决相同 Bean 名冲突问题,适用于多数据源配置

# MySQL 数据源配置(可选,通过命令行或环境变量覆盖)
mysql:
  datasource:
    url: ${MYSQL_URL:}  # MySQL 数据库的连接 URL默认为空可通过环境变量 MYSQL_URL 或命令行参数 --mysql.datasource.url 指定
                        # 示例jdbc:mysql://localhost:3306/upload-file?useSSL=false&serverTimezone=Asia/Shanghai
    username: ${MYSQL_USERNAME:}  # MySQL 用户名,默认为空,可通过 MYSQL_USERNAME 或 --mysql.datasource.username 指定
    password: ${MYSQL_PASSWORD:}  # MySQL 密码,默认为空,可通过 MYSQL_PASSWORD 或 --mysql.datasource.password 指定
    driver-class-name: com.mysql.cj.jdbc.Driver  # MySQL 的 JDBC 驱动类名,确保项目依赖中包含 mysql-connector-java

# 日志配置
logging:
  level:
    cn.czh.mapper: debug  # 设置 cn.czh.mapper 包下的日志级别为 DEBUG方便查看 MyBatis SQL 执行详情
    org.springframework.jdbc: debug  # 设置 Spring JDBC 的日志级别为 DEBUG方便调试数据源初始化和 SQL 执行

贡献

欢迎提交 Issue 或 Pull Request

Description
No description provided
Readme 6.4 MiB
Languages
Vue 48.1%
Java 47.1%
JavaScript 4.6%
HTML 0.2%