Spring Boot + Vue 实现文件导入导出功能

1、概述

​ 在现代Web应用开发中，文件的导入导出是一个常见的需求。Spring Boot作为后端开发的强大框架，搭配前端框架Vue，可以轻松实现这一功能。本文将介绍如何使用Spring Boot和Vue来实现文件的导入导出。在本方案中，Spring Boot将作为后端服务来处理文件的存储和读取逻辑，而Vue将作为前端界面与用户进行交互。我们将使用Spring Boot的MultipartFile来接收前端上传的文件，并使用ResponseEntity来将文件发送给前端用户进行下载。

2、后端实现（Spring Boot）

环境搭建

首先，确保你已经安装了Java开发环境和Maven或Gradle。然后，创建一个新的Spring Boot项目，并添加以下依赖到pom.xml或build.gradle文件中：

<!-- pom.xml -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.8.0</version>
</dependency>
1
2
3
4
5
6
7
8
9
10

文件上传接口

创建一个FileController来处理文件上传请求。这里我们使用MultipartFile来接收上传的文件，并将其保存到服务器的指定目录：

@RestController
public class FileController {

    private static final String UPLOADED_FOLDER = "uploaded/";

    @PostMapping("/upload")
    public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return ResponseEntity.badRequest().body("File is empty");
        }

        try {
            String fileName = file.getOriginalFilename();
            Path targetLocation = Paths.get(UPLOADED_FOLDER).resolve(fileName);
            Files.copy(file.getInputStream(), targetLocation, StandardCopyOption.REPLACE_EXISTING);
            return ResponseEntity.ok("File uploaded successfully: " + fileName);
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload file");
        }
    }

    // 其他必要的方法，如文件存储路径配置等
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

文件下载接口

在同一个FileController中，添加一个用于文件下载的方法。这里我们使用FileSystemResource来定位文件，并将其作为HTTP响应的主体发送给客户端：

@GetMapping("/download/{filename:.+}")
public ResponseEntity<Resource> downloadFile(@PathVariable String filename) {
    String folder = "uploaded/";
    Path filePath = Paths.get(folder).resolve(filename);
    Resource resource = new FileSystemResource(filePath);

    try {
        if (!resource.exists() || !Files.isReadable(resource.getFile().toPath())) {
            return ResponseEntity.notFound().build();
        }
    } catch (IOException e) {
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Could not read file");
    }

    return ResponseEntity.ok()
            .contentType(MediaType.parseMediaType("application/octet-stream"))
            .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + filename + "\"")
            .body(resource);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3、前端实现（Vue）

环境搭建

使用Vue CLI创建一个新的Vue项目，并安装axios用于发送HTTP请求：

vue create my-vue-app
cd my-vue-app
vue add axios
1
2
3

文件上传

在Vue组件中，添加一个表单用于文件上传，并使用axios发送请求到后端的文件上传接口。同时，我们添加了文件选择后的事件处理和上传前的预处理：

<template>
  <div>
    <h1>File Upload</h1>
    <form @submit.prevent="uploadFile">
      <input type="file" @change="onFileChange" />
      <button type="submit">Upload</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null,
    };
  },
  methods: {
    onFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    async uploadFile() {
      if (this.selectedFile) {
        const formData = new FormData();
        formData.append('file', this.selectedFile);
        try {
          const response = await axios.post('/upload', formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          });
          console.log(response.data);
          // 处理上传成功后的逻辑，如更新文件列表等
        } catch (error) {
          console.error(error);
          // 处理上传失败的逻辑
        }
      }
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

文件下载

在Vue组件中，添加一个链接或按钮，当用户点击时，调用axios发送请求到后端的文件下载接口，并处理响应以触发文件下载：

<template>
  <div>
    <!-- ... -->
    <a :href="downloadUrl" download>Download File</a>
    <!-- ... -->
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      downloadUrl: null,
    };
  },
  methods: {
    async downloadFile(filename) {
      const response = await axios({
        method: 'GET',
        url: `/download/${filename}`,
        responseType: 'blob', // 重要
      });

      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', filename);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    },
  },
  watch: {
    // 假设filename是从某个状态或props中获取的文件名
    filename(newFilename) {
      if (newFilename) {
        this.downloadUrl = `/download/${newFilename}`;
      }
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

4、总结

​ 通过上述步骤，我们详细介绍了如何使用Spring Boot和Vue实现文件的导入导出功能。后端Spring Boot提供了文件上传和下载的RESTful API，而前端Vue则提供了用户友好的界面和交互逻辑。这种前后端分离的架构不仅使得开发过程更加清晰，也提高了应用的可维护性和可扩展性。此外，通过使用axios和FormData，我们能够轻松处理HTTP请求和文件数据的传输，而EasyExcel等库的使用则进一步简化了文件处理的复杂性。