从 0 到 1：我用 Java + Vue 实现了文件上传压缩功能（附完整项目结构）

🚀 #TRAE SOLO 实战赛 | 标签：Java 后端、Vue 前端、文件上传、AI工程协作

作者：天天摸鱼的java工程师

项目代号：study-hong

📌 效果图

📌 项目背景

在本次 TARE SOLO 实战赛中，我选择了一个非常常见但又容易踩坑的前后端协同功能：

实现一个支持上传、压缩、自动下载的文件处理系统，使用 Java 实现后端压缩逻辑，Vue 实现用户上传界面。

在整个开发过程中，我借助 TRAE SOLO 的任务管理 + AI协作能力，快速从无到有完成了项目结构搭建、压缩逻辑实现、前后端联调测试，并记录了每一步开发"Thought"。

🧩 项目结构总览

bash 复制代码

study-hong/
├── backend/                        # Spring Boot 后端
│   ├── src/main/java/com/example/filecompression/
│   │   ├── FileCompressionApplication.java   # 主类
│   │   ├── controller/FileUploadController.java # 文件上传接口
│   │   └── utils/FileCompressionUtil.java    # 压缩逻辑
│   └── pom.xml                      # Maven依赖
└── frontend/                       # Vue3 + Vite 前端
    ├── src/
    │   ├── App.vue                 # 文件上传组件
    │   ├── main.js                 # Vue入口
    │   └── style.css               # 样式文件
    ├── vite.config.js              # Vite配置
    └── package.json                # 项目依赖

✅ 功能清单

🌐 后端（Spring Boot）

支持文件上传接口 POST /api/file/upload
根据文件大小自动选择压缩格式（zip / tar.gz）
自动清理临时文件，防止磁盘堆积
支持跨域（CORS 配置开箱即用）

🖼️ 前端（Vue3 + 原生 JS）

拖拽上传 / 选择上传
实时展示文件名和大小
上传进度展示
压缩完成后自动触发浏览器下载

🧠 我的开发流程（结合 TRAE SOLO）

工程师的效率，往往不是写代码的速度，而是对项目的拆解能力。

借助 TRAE SOLO 的任务流功能，我把整个开发拆解成了 6 个明确步骤：

创建 Spring Boot 后端项目结构 ✅
实现 Java 文件压缩逻辑 ✅
创建文件上传 API 接口 ✅
创建 Vue 前端结构 ✅
实现 Vue 上传组件 ✅
测试前后端集成 ✅

每完成一步，我都会在 TRAE SOLO 中记录 Thought ------ 开发思路、遇到的问题、解决方式，方便后期回顾和团队协作。

🔧 核心技术实现

✳️ Java 后端：智能压缩逻辑

ini 复制代码

if (inputFile.length() > 10 * 1024 * 1024) { // 大于10MB
    compressedFile = new File(outputDir, baseName + ".tar.gz");
    compressToTarGz(inputFile, compressedFile);
} else {
    compressedFile = new File(outputDir, baseName + ".zip");
    compressToZip(inputFile, compressedFile);
}

✅ 小技巧：使用 Apache Commons Compress 处理 tar.gz 比原生 API 更稳定。

📡 文件上传 API 接口

less 复制代码

@PostMapping("/api/file/upload")
public ResponseEntity<Resource> uploadFile(@RequestParam MultipartFile file) {
    // 保存临时文件
    // 执行压缩
    // 返回压缩文件流
}

✅ 文件上传大小限制可通过 application.properties 配置。

⚙️ Vue 前端：上传并触发下载

ini 复制代码

const response = await fetch('/api/file/upload', {
  method: 'POST',
  body: formData
});
const blob = await response.blob();
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = file.name + '.compressed';
a.click();

✅ 使用原生 JS + Fetch API，避免引入额外依赖。

✅ 文件上传界面（支持拖拽）
✅ 上传进度条
✅ 自动下载弹窗
✅ 后台日志显示压缩类型与耗时

🧪 本地运行方式

启动后端：

arduino 复制代码

cd backend
mvn spring-boot:run

默认端口：http://localhost:8080

启动前端：

arduino 复制代码

cd frontend
npm install
npm run dev

默认端口：http://localhost:3000

浏览器访问：

打开 http://localhost:3000，体验文件上传压缩功能！

🧵 一些值得分享的小细节

💡 压缩格式自动判断：避免用户选择，后端根据文件大小智能处理
💡 跨浏览器兼容下载 ：使用 Blob + a.download 实现无插件下载
💡 文件名处理：避免中文乱码，统一使用 UTF-8 和 URL 编码
💡 AI开发日志记录：通过 TRAE SOLO 的 Task Thought 记录每一步开发过程，是很棒的知识积累方式

🎯 总结：AI写码，工程师控场

这次项目开发中，我深刻体会到：

AI 可以帮你写代码，但项目上线靠的是工程师的拆解力、组织力和验证力。

TRAE SOLO 不只是一个生成代码的工具，更是一个工程思维增强器，让我在开发过程中不断思考：

我的任务是否明确？
我的模块是否解耦？
我的实现方式是否优雅？

通过 AI + 工程协作，我完成了这个上传压缩功能的全链路实现，也为之后更复杂功能开发打下了基础。

📚 技术栈回顾

技术	用途
Java 8 + Spring Boot	后端服务 & 压缩逻辑
Apache Commons Compress	文件压缩工具库
Vue 3 + Vite	前端构建与交互
Fetch API	文件上传实现
TRAE SOLO	AI协作 + 工程组织

📌 后续计划

✅ 支持多文件上传压缩
✅ 添加压缩进度条（后端异步处理）
✅ 增加压缩格式选择功能（zip / tar.gz / 7z）
✅ 将服务部署至云端，支持公网访问

📣 最后

如果你也正在用 TRAE SOLO 做项目，或者你也在开发类似的上传压缩功能，欢迎评论区交流！