如何使用Angular 4向Spring Rest Controller上传Zip文件

没问题！我来一步步教你实现Angular 4上传.zip文件到Spring后端的功能，分前端和后端两部分来讲，保证清晰易懂～

一、Angular 4 前端实现 #

1. 先搞定组件模板（HTML） #

在你的上传组件模板里，添加一个文件选择框和上传按钮，限制只能选择.zip文件：

<div class="upload-container">
  <input type="file" 
         #fileInput 
         accept=".zip" 
         (change)="onFileSelected($event)"
         style="display: none;">
  <button (click)="fileInput.click()">选择Zip文件</button>
  <button (click)="uploadFile()" [disabled]="!selectedFile">上传文件</button>
</div>

2. 编写组件逻辑（TypeScript） #

首先确保你的项目已经引入了HttpClientModule（在app.module.ts里导入并添加到imports数组），然后在组件里实现文件选择和上传的方法：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-zip-upload',
  templateUrl: './zip-upload.component.html',
  styleUrls: ['./zip-upload.component.css']
})
export class ZipUploadComponent {
  @ViewChild('fileInput') fileInput: ElementRef;
  selectedFile: File | null = null;

  constructor(private http: HttpClient) {}

  onFileSelected(event: any): void {
    const file = event.target.files[0];
    // 额外校验一下是不是zip文件
    if (file && file.type === 'application/zip') {
      this.selectedFile = file;
    } else {
      alert('请选择有效的Zip文件！');
      this.fileInput.nativeElement.value = ''; // 重置文件选择框
    }
  }

  uploadFile(): void {
    if (!this.selectedFile) return;

    const formData = new FormData();
    formData.append('file', this.selectedFile, this.selectedFile.name);

    // 替换成你的后端接口地址
    const uploadUrl = 'http://localhost:8080/api/upload-zip';

    this.http.post(uploadUrl, formData, {
      reportProgress: true,
      observe: 'events'
    }).subscribe(
      (event) => {
        // 这里可以根据事件类型处理上传进度
        if (event.type === 4) { // HttpResponse
          alert('文件上传成功！');
          this.fileInput.nativeElement.value = '';
          this.selectedFile = null;
        }
      },
      (error) => {
        console.error('上传失败:', error);
        alert('文件上传失败，请重试！');
      }
    );
  }
}

二、Spring 后端实现 #

1. 依赖配置（以Maven为例） #

在你的pom.xml里添加必要的依赖，确保支持文件上传：

<dependencies>
  <!-- Spring Web Starter -->
  <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>
  <dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.11.0</version>
  </dependency>
</dependencies>

2. 编写Rest Controller #

创建一个处理文件上传的接口，注意处理文件保存、校验和异常：

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.http.ResponseEntity;
import org.springframework.http.HttpStatus;
import java.io.File;
import java.io.IOException;
import org.apache.commons.io.FilenameUtils;

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:4200") // 允许Angular前端跨域访问，替换成你的前端地址
public class ZipUploadController {

    // 定义文件保存的路径，建议配置到application.properties里，这里先硬编码示例
    private static final String UPLOAD_DIR = "/path/to/your/upload/directory";

    @PostMapping("/upload-zip")
    public ResponseEntity<String> uploadZipFile(@RequestParam("file") MultipartFile file) {
        // 校验文件是否为空
        if (file.isEmpty()) {
            return new ResponseEntity<>("请选择要上传的Zip文件！", HttpStatus.BAD_REQUEST);
        }

        // 校验文件类型是否为zip
        String extension = FilenameUtils.getExtension(file.getOriginalFilename());
        if (!"zip".equalsIgnoreCase(extension)) {
            return new ResponseEntity<>("仅支持上传Zip格式文件！", HttpStatus.BAD_REQUEST);
        }

        // 创建上传目录（如果不存在）
        File uploadDir = new File(UPLOAD_DIR);
        if (!uploadDir.exists()) {
            uploadDir.mkdirs();
        }

        // 保存文件到服务器
        try {
            File destFile = new File(uploadDir.getAbsolutePath() + File.separator + file.getOriginalFilename());
            file.transferTo(destFile);
            return new ResponseEntity<>("Zip文件上传成功！", HttpStatus.OK);
        } catch (IOException e) {
            e.printStackTrace();
            return new ResponseEntity<>("文件保存失败：" + e.getMessage(), HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }
}

三、一些关键注意事项 #

• 跨域问题：如果你的Angular前端和Spring后端运行在不同端口（比如Angular默认4200，Spring默认8080），一定要在Spring控制器上添加@CrossOrigin注解，或者全局配置CORS。
• 文件大小限制：默认Spring对上传文件大小有限制，如果你需要上传大文件，可以在application.properties里添加：

  spring.servlet.multipart.max-file-size=100MB
  spring.servlet.multipart.max-request-size=100MB
  

  调整成你需要的大小即可。
• 文件类型校验：前端和后端最好都做校验，避免无效文件上传。

内容的提问来源于stack exchange，提问作者Atul