开发实例：后端Java和前端vue实现文件上传和下载功能

首先，在Java的后端代码中，我们可以使用Spring框架来实现文件上传和下载功能。以下是一个简单的示例：

• 文件上传

首先，我们需要在html页面上创建一个表单，其中包含一个file类型的输入字段：

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file" />
  <button type="submit">上传文件</button>
</form>

然后，在后端代码中，我们可以使用Spring框架的MultipartFile类来处理上传的文件，并将其保存到服务器上：

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String handleFileUpload(@RequestParam("file") MultipartFile file) {
    if (!file.isEmpty()) {
        try {
            byte[] bytes = file.getBytes();
            Path path = Paths.get("/path/to/upload/dir/" + file.getOriginalFilename());
            Files.write(path, bytes);
            return "上传成功：" + file.getOriginalFilename();
        } catch (IOException e) {
            e.printStackTrace();
            return "上传失败：" + file.getOriginalFilename();
        }
    } else {
        return "上传失败：请选择要上传的文件！";
    }
}

在这个例子中，我们首先检查上传的文件是否为空，如果不为空，就读取文件的字节数据，并使用Files.write()方法将其写入指定的路径。

 

• 文件下载

对于文件下载，我们可以使用Spring框架的ResponseEntity类来将文件内容作为响应体返回给前端。以下是一个示例代码：

@ResponseBody
public ResponseEntity<byte[]> downloadFile(@PathVariable String fileName) {
    File file = new File("/path/to/download/dir/" + fileName);
    if (file.exists()) {
        try {
            byte[] fileBytes = Files.readAllBytes(file.toPath());
            HttpHeaders headers = new HttpHeaders();
            headers.add("Content-Disposition", "attachment; filename=" + fileName);
            ResponseEntity<byte[]> responseEntity = new ResponseEntity<>(fileBytes, headers, HttpStatus.OK);
            return responseEntity;
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    return null;
}

在这个例子中，我们首先检查指定的文件是否存在。如果存在，我们就使用Files.readAllBytes()方法读取文件内容生成byte数组，并将其设置为响应体的内容。同时，我们还需要设置响应头信息，告诉浏览器将该响应的内容作为下载文件。

在vue前端代码中，我们可以使用axios发送POST请求来上传文件，使用window.open()方法来实现文件下载。以下是一个示例代码：

• 文件上传

<template>
  <div>
    <input type="file" @change="uploadFile">
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    uploadFile(e) {
      let formData = new FormData()
      formData.append('file', e.target.files[0])
      axios.post('/upload', formData)
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error.response.data)
        })
    }
  }
}
</script>

在这个例子中，我们只需要监听文件选择框的change事件，获取用户选择的文件，并使用FormData对象创建一个包含文件的表单数据。然后，我们使用axios.post()方法将表单数据发送给服务器。

• 文件下载

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      let fileName = 'example.txt'  // 要下载的文件名
      window.open('/download/' + fileName)
    }
  }
}
</script>

在这个例子中，我们只需要在按钮的click事件中调用window.open()方法，并将要下载的文件名拼接到URL中即可。由于文件下载是浏览器自身的行为，因此我们无法通过JavaScript代码直接控制，只能将该操作委托给浏览器处理。

 

参考文章：http://blog.ncmem.com/wordpress/2023/10/26/%e5%bc%80%e5%8f%91%e5%ae%9e%e4%be%8b%ef%bc%9a%e5%90%8e%e7%ab%afjava%e5%92%8c%e5%89%8d%e7%ab%afvue%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e5%92%8c%e4%b8%8b%e8%bd%bd%e5%8a%9f%e8%83%bd/

欢迎入群一起讨论