Vue + ElementUI + Spring Boot 实现文件上传下载的实战技巧

2023-01-09 19:02:28

Vue + ElementUI + Spring Boot 项目中实现文件上传和下载

对于当今的 Web 应用程序，文件上传和下载已成为基本功能。在本文中，我们将深入探讨如何在使用 Vue.js、ElementUI 和 Spring Boot 构建的项目中实现文件上传和下载。

前端实现

1. 表单文件上传组件

为了实现文件的上传，我们将使用 ElementUI 提供的 el-upload 组件。它简化了文件上传过程，提供了拖放功能、进度条和错误处理。

<el-upload
  action="/api/file/upload"
  auto-upload="true"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <button slot="trigger" type="button">选择文件</button>
</el-upload>

2. 上传成功和失败的处理

上传完成后，我们需要处理结果。ElementUI 提供了 on-success 和 on-error 事件，可让我们轻松处理上传的成功和失败。

handleSuccess(response) {
  console.log(response);
  // 将上传成功后的文件路径存储到数据库
  this.$store.dispatch('file/uploadFile', response.data);
},
handleError(error) {
  console.log(error);
  // 提示用户上传失败
  this.$message.error('文件上传失败');
}

后端实现

1. 文件存储

服务器存储

如果选择将文件存储在服务器上，我们需要指定存储路径。

@Value("${file.upload-path}")
private String uploadPath;

数据库存储

如果选择将文件存储在数据库中，我们需要创建一个文件表。

CREATE TABLE files (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  path VARCHAR(255) NOT NULL,
  type VARCHAR(255),
  PRIMARY KEY (id)
);

2. 文件读取

服务器存储

从服务器读取文件：

@GetMapping("/api/file/{fileName}")
public ResponseEntity<byte[]> downloadFile(@PathVariable String fileName) {
  // 从服务器磁盘读取文件
  File file = new File(uploadPath + fileName);
  byte[] bytes = Files.readAllBytes(file.toPath());
  return ResponseEntity.ok()
    .header("Content-Disposition", "attachment; filename=" + fileName)
    .body(bytes);
}

数据库存储

从数据库读取文件：

@GetMapping("/api/file/{fileName}")
public ResponseEntity<byte[]> downloadFile(@PathVariable String fileName) {
  // 从数据库查询文件信息
  File file = fileService.getFile(fileName);
  byte[] bytes = Files.readAllBytes(file.toPath());
  return ResponseEntity.ok()
    .header("Content-Disposition", "attachment; filename=" + file.getName())
    .body(bytes);
}