java spring boot 单/多文件上传/下载

使用版本

后端

• spring-boot 3.3.0
• jdk17

前端

• vue “^3.3.11”
• vite “^5.0.8”
• axios “^1.7.2”

文件上传

上传文件比较简单。一般前端传文件流（二进制）到后端，后端处理文件流保存到目标位置即可！

服务端

MultipartFile是SpringMVC提供简化上传操作的工具类。
主要是使用 MultipartFile 的 transferTo 方法。

这里使用了MultipartFile[] 表示支持多文件上传

@PostMapping(path = {"/upload"})
public void getMs(@RequestPart("file") MultipartFile[] files) throws IOException {
    for (MultipartFile file : files){
        String fileName = file.getOriginalFilename();
        File dest = new File("/Users/cyq/Downloads/" + fileName);
        file.transferTo(dest);
    }
}

客户端（前端）

方式一

使用原生上传

需要注意的是

• 用formData去保存文件信息，
• 设置类型’Content-Type’: ‘multipart/form-data’

formData可以存储二进制文件、blob等类型，

<script setup>
import { ref } from 'vue'
import axios from 'axios'

function sendRequest(file) {
  const formData = new FormData();

  formData.append('file', file[0]);
  formData.append('file', file[1]);

  axios.post('/api/ceel/hi', formData,{
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

function getFile(event){
  const files =  event.target.files
  console.log(files);
  sendRequest(files)
}
</script>

<template>
  <input v-on:change="getFile" multiple="multiple" type="file" />
</template>

方式二

就很简单了，直接使用elment-plus的上传组件。
使用这种方式多文件上传时- 其实是一个一个的上传的。并不是一下子上传。

<script setup>
import { ref } from 'vue'
const fileList = ref([])
</script>

<template>
<el-upload multiple
   action="/api/ceel/hi"
   v-model:file-list="fileList"
>
	<el-button type="primary">上传文件</el-button>
</el-upload>
</template>

文件下载

下载文件一般都是处理文件流。
通常使用一个byte数组（字节数组）来存放文件流中的数据，每次存取byte数组的长度个数据。然后放到输出流中。
重复以上动作，直到文件流处理完成！

就像是个搬运工，每次搬运指定字节的数据，从输入流到输出流直到搬完。

服务端

@GetMapping("/download")
public void download(String fileName, HttpServletResponse response) throws IOException {

    String _u = "/Users/cyq/Downloads/";
    String filePath = _u + fileName + ".xlsx";
    File file = new File(filePath);

    response.setContentType("application/octet-stream");
    // 告知浏览器文件大小
    response.addHeader("Content-Length", "" + file.length()); 
    response.setHeader("content-disposition","attachment;fileName="+ URLEncoder.encode(file.getName(), "UTF-8"));

    FileInputStream inputStream = new FileInputStream(file);
    ServletOutputStream outputStream = response.getOutputStream();
    try (inputStream; outputStream){
        byte[] buffer = new byte[1024];
        int len;
        while ((len = inputStream.read(buffer)) > 0){
            outputStream.write(buffer, 0, len);
        }
    }
}

客户端（前端）

发起请求，需要明确返回数据的类型是 blob，添加responseType: ‘blob’
拿到返回流后，通过URL.createObjectURL处理文件流，生成一个url，供a标签进行下载！
下载完成后需要移除。

function sendRequest() {
  axios.get('/api/ceel/download?fileName=模板-财源系统', {
    responseType: 'blob'
  })
    .then(function (response) {
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', '模板-财源系统.xlsx');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    })
    .catch(function (error) {
      console.log(error);
    });
}

代码仓库地址

• 后端代码 https://github.com/Mrceel/java-demo.git

路径为

package com.example.practicejava.file;