Axios+Spring Boot实现文件上传和下载

下面是关于“Axios+Spring Boot实现文件上传和下载”的完整攻略。

介绍

在Web应用中，我们经常需要上传和下载文件。本文将介绍如何使用Axios和Spring Boot实现文件上传和下载功能。

Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。而Spring Boot是一个快速创建Spring应用程序的工具，可以轻松的创建RESTful Web Service应用程序。

文件上传

前端实现

安装Axios

要使用Axios，需要先将其安装到项目中。可以使用npm进行安装：

npm install axios

创建上传文件表单

我们需要创建一个文件上传表单，可以使用<input type="file">元素。在表单中加入以下代码：

<form>
  <input type="file" ref="fileUpload"/>
  <button @click="uploadFile">上传</button>
</form>

上传文件

在调用上传接口之前，需要创建一个FormData对象，将文件添加到其中。然后，使用Axios的post方法，将FormData对象和请求头传递给服务器：

methods: {
  async uploadFile() {
    let formData = new FormData();
    formData.append('file', this.$refs.fileUpload.files[0]);
    try {
      let response = await axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      alert(response.data);
    } catch (error) {
      console.log(error);
    }
  }
}

在这个示例中，我们将文件上传到了/upload接口。

后端实现

创建上传接口

创建一个上传文件的接口，可以使用@PostMapping注解。使用@RequestParam注解获取上传的文件。返回一个成功信息即可：

@PostMapping("upload")
public String uploadFile(@RequestParam("file") MultipartFile file) {
  try {
    // 存储文件
    byte[] bytes = file.getBytes();
    Path path = Paths.get("upload/" + file.getOriginalFilename());
    Files.write(path, bytes);

    return "上传成功";
  } catch (IOException e) {
    e.printStackTrace();
  }
  return "上传失败";
}

在这个示例中，我们使用了Files.write()方法将文件保存到了upload目录下。

文件下载

前端实现

创建下载链接

我们可以创建一个下载链接，点击链接即可下载文件。在页面中加入以下代码：

<a :href="downloadUrl" download="sample.txt">下载</a>

获取下载链接

在调用下载接口之前，需要获取下载链接。可以使用Axios的get方法，将请求头传递给服务器：

async getDownloadUrl() {
  let response = await axios.get('/download', {
    headers: {
      'Content-Type': 'application/json'
    }
  });
  this.downloadUrl = response.data;
}

在这个示例中，我们请求了/download接口，获取到了下载链接。

后端实现

创建下载接口

创建一个下载文件的接口，可以使用@GetMapping注解。读取文件内容，返回一个字节数组即可：

@GetMapping("download")
public ResponseEntity<byte[]> downloadFile() throws IOException {
  ClassPathResource resource = new ClassPathResource("sample.txt");
  byte[] bytes = new byte[resource.getInputStream().available()];
  resource.getInputStream().read(bytes);

  HttpHeaders headers = new HttpHeaders();
  headers.add("Content-Disposition", "attachment;filename=sample.txt");

  return new ResponseEntity<>(bytes, headers, HttpStatus.OK);
}

在这个示例中，我们读取了sample.txt文件，将其字节数组返回，并设置了文件下载的响应头。

结束语

本文介绍了如何使用Axios和Spring Boot实现文件上传和下载功能。通过这些示例，读者可以了解到如何在Web应用中处理文件IO操作。

希望这篇文章能够对您有所帮助。