Spring Boot和Vue前后端分離項目中如何實現文件上傳

# Spring Boot和Vue前后端分離項目中如何實現文件上傳

## 引言

在現代Web應用開發中，文件上傳是一個常見的功能需求。無論是用戶頭像上傳、文檔分享還是多媒體內容管理，都需要可靠的文件上傳機制。在前后端分離架構中，這種功能需要前后端的協同配合。

本文將詳細介紹如何在Spring Boot和Vue.js構建的前后端分離項目中實現文件上傳功能，涵蓋從基礎實現到進階優化的完整方案。

## 一、技術棧概述

### 1.1 前端技術棧
- Vue.js 3.x：前端框架
- Element Plus/Ant Design Vue：UI組件庫
- Axios：HTTP客戶端
- Vue Router：路由管理

### 1.2 后端技術棧
- Spring Boot 2.7.x：后端框架
- Spring Web：Web MVC支持
- Lombok：簡化代碼
- Commons FileUpload：文件處理

## 二、后端實現

### 2.1 基礎環境配置

首先確保Spring Boot項目中包含必要依賴：

```xml
<!-- pom.xml -->
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.4</version>
    </dependency>
</dependencies>

2.2 配置文件上傳

在application.properties中配置上傳參數：

# 文件上傳配置
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=20MB
file.upload-dir=./uploads/

2.3 實現上傳接口

創建文件上傳控制器：

@RestController
@RequestMapping("/api/file")
public class FileUploadController {
    
    @Value("${file.upload-dir}")
    private String uploadDir;
    
    @PostMapping("/upload")
    public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
        try {
            // 創建上傳目錄
            Path uploadPath = Paths.get(uploadDir);
            if (!Files.exists(uploadPath)) {
                Files.createDirectories(uploadPath);
            }
            
            // 生成唯一文件名
            String fileName = UUID.randomUUID() + "_" + file.getOriginalFilename();
            Path filePath = uploadPath.resolve(fileName);
            
            // 保存文件
            Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);
            
            return ResponseEntity.ok("文件上傳成功: " + fileName);
        } catch (Exception e) {
            return ResponseEntity.status(500).body("上傳失敗: " + e.getMessage());
        }
    }
}

2.4 進階優化

2.4.1 文件類型校驗

private final Set<String> ALLOWED_TYPES = Set.of(
    "image/jpeg", "image/png", "application/pdf"
);

@PostMapping("/upload")
public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
    if (!ALLOWED_TYPES.contains(file.getContentType())) {
        return ResponseEntity.badRequest().body("不支持的文件類型");
    }
    // ...原有邏輯
}

2.4.2 文件大小限制

private final long MAX_SIZE = 10 * 1024 * 1024; // 10MB

@PostMapping("/upload")
public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
    if (file.getSize() > MAX_SIZE) {
        return ResponseEntity.badRequest().body("文件大小超過限制");
    }
    // ...原有邏輯
}

三、前端實現

3.1 基礎上傳組件

使用Element Plus的上傳組件：

<template>
  <el-upload
    class="upload-demo"
    action="/api/file/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :limit="3"
    multiple
  >
    <el-button type="primary">點擊上傳</el-button>
    <template #tip>
      <div class="el-upload__tip">
        請上傳jpg/png文件，且不超過10MB
      </div>
    </template>
  </el-upload>
</template>

<script setup>
const handleSuccess = (response) => {
  console.log('上傳成功', response);
};

const beforeUpload = (file) => {
  const isAllowedType = ['image/jpeg', 'image/png'].includes(file.type);
  const isLt10M = file.size / 1024 / 1024 < 10;
  
  if (!isAllowedType) {
    ElMessage.error('只能上傳JPG/PNG格式!');
  }
  if (!isLt10M) {
    ElMessage.error('文件大小不能超過10MB!');
  }
  
  return isAllowedType && isLt10M;
};
</script>

3.2 自定義上傳邏輯

使用Axios實現更靈活的控制：

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const fileList = ref([]);

const handleUpload = () => {
  const formData = new FormData();
  fileList.value.forEach(file => {
    formData.append('files', file.raw);
  });
  
  axios.post('/api/file/upload-multi', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(response => {
    ElMessage.success('上傳成功');
  }).catch(error => {
    ElMessage.error('上傳失敗');
  });
};
</script>

四、進階功能實現

4.1 分片上傳

后端實現

@PostMapping("/chunk-upload")
public ResponseEntity<String> chunkUpload(
    @RequestParam("file") MultipartFile file,
    @RequestParam("chunkNumber") int chunkNumber,
    @RequestParam("totalChunks") int totalChunks,
    @RequestParam("identifier") String identifier) {
    
    try {
        String tempDir = uploadDir + "temp/" + identifier + "/";
        Path tempPath = Paths.get(tempDir);
        if (!Files.exists(tempPath)) {
            Files.createDirectories(tempPath);
        }
        
        String chunkFilename = chunkNumber + "_" + file.getOriginalFilename();
        Files.copy(file.getInputStream(), tempPath.resolve(chunkFilename));
        
        return ResponseEntity.ok("分片上傳成功");
    } catch (Exception e) {
        return ResponseEntity.status(500).body("分片上傳失敗");
    }
}

@PostMapping("/merge-chunks")
public ResponseEntity<String> mergeChunks(
    @RequestParam("filename") String filename,
    @RequestParam("totalChunks") int totalChunks,
    @RequestParam("identifier") String identifier) {
    
    try {
        String tempDir = uploadDir + "temp/" + identifier + "/";
        Path outputFile = Paths.get(uploadDir + filename);
        
        try (OutputStream out = Files.newOutputStream(outputFile, StandardOpenOption.CREATE)) {
            for (int i = 1; i <= totalChunks; i++) {
                Path chunkFile = Paths.get(tempDir + i + "_" + filename);
                Files.copy(chunkFile, out);
                Files.delete(chunkFile);
            }
        }
        
        // 清理臨時目錄
        Files.delete(Paths.get(tempDir));
        
        return ResponseEntity.ok("文件合并成功");
    } catch (Exception e) {
        return ResponseEntity.status(500).body("文件合并失敗");
    }
}

前端實現

const chunkSize = 2 * 1024 * 1024; // 2MB

async function uploadFile(file) {
  const totalChunks = Math.ceil(file.size / chunkSize);
  const identifier = Date.now() + '-' + Math.random().toString(36).substr(2);
  
  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);
    
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('chunkNumber', i + 1);
    formData.append('totalChunks', totalChunks);
    formData.append('identifier', identifier);
    
    await axios.post('/api/file/chunk-upload', formData);
  }
  
  await axios.post('/api/file/merge-chunks', {
    filename: file.name,
    totalChunks,
    identifier
  });
}

4.2 斷點續傳

在分片上傳基礎上增加狀態記錄：

// 前端記錄已上傳分片
const uploadedChunks = new Set();

async function uploadFile(file) {
  // ...獲取已上傳分片信息
  const { data } = await axios.get(`/api/file/uploaded-chunks?identifier=${identifier}`);
  data.forEach(chunk => uploadedChunks.add(chunk));
  
  for (let i = 0; i < totalChunks; i++) {
    if (uploadedChunks.has(i + 1)) continue;
    
    // ...上傳邏輯
  }
}

4.3 進度顯示

<template>
  <el-progress :percentage="uploadProgress"></el-progress>
</template>

<script setup>
const uploadProgress = ref(0);

async function uploadFile(file) {
  // ...分片上傳邏輯
  const progress = Math.round((i + 1) / totalChunks * 100);
  uploadProgress.value = progress;
}
</script>

五、安全與優化

5.1 安全措施

1. 文件類型校驗：檢查MIME類型和文件擴展名
2. 病毒掃描：集成ClamAV等掃描工具
3. 權限控制：確保用戶有上傳權限
4. 文件名處理：避免路徑遍歷攻擊

5.2 性能優化

1. 異步處理：使用消息隊列處理大文件
2. CDN加速：上傳到CDN而非本地存儲
3. 壓縮處理：自動壓縮圖片等可壓縮文件
4. 緩存策略：合理設置HTTP緩存頭

六、部署注意事項

1. 存儲目錄：確保應用有寫入權限
2. 跨域配置：正確配置CORS
3. Nginx配置：調整client_max_body_size
4. HTTPS：生產環境必須使用HTTPS

七、完整示例項目結構

project/
├── backend/
│   ├── src/
│   │   └── main/
│   │       ├── java/
│   │       │   └── com/example/
│   │       │       ├── config/
│   │       │       ├── controller/
│   │       │       ├── dto/
│   │       │       └── Application.java
│   │       └── resources/
│   │           ├── application.properties
│   │           └── static/
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   │   └── FileUpload.vue
│   │   ├── router/
│   │   ├── store/
│   │   └── main.js
│   └── package.json
└── uploads/

結語

通過本文的介紹，我們全面了解了在Spring Boot和Vue前后端分離項目中實現文件上傳的各種技術方案。從基礎的單文件上傳到高級的分片上傳、斷點續傳等功能，開發者可以根據實際項目需求選擇合適的實現方式。

在實際開發中，還需要考慮更多的業務場景和異常處理，但本文提供的核心思路和代碼示例已經涵蓋了文件上傳功能的主要技術要點。希望本文能對您的項目開發有所幫助。 “`

這篇文章大約3900字，采用Markdown格式編寫，包含了從基礎到進階的文件上傳實現方案，涵蓋了Spring Boot后端和Vue前端的完整實現代碼，以及相關的優化和安全建議。文章結構清晰，內容詳實，適合作為技術文檔或教程使用。