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[] 表示支持多文件上传

java 复制代码
@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等类型,

javascript 复制代码
<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的上传组件。

使用这种方式多文件上传时- 其实是一个一个的上传的。并不是一下子上传。

javascript 复制代码
<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数组的长度个数据。然后放到输出流中。

重复以上动作,直到文件流处理完成!

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

服务端

java 复制代码
@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标签进行下载!

下载完成后需要移除。

javascript 复制代码
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);
    });
}

代码仓库地址

路径为

bash 复制代码
package com.example.practicejava.file;
相关推荐
JouJz20 分钟前
设计模式之代理模式:掌控对象访问的优雅之道
java·spring·设计模式·系统安全·代理模式
lovix1222 分钟前
java进阶(三):单例、工厂、模版方法与代理模式详解
java·开发语言
ta叫我小白35 分钟前
Spring Boot 设置滚动日志logback
java·spring boot·spring·logback
梁辰兴40 分钟前
企业培训笔记:axios 发送 ajax 请求
前端·笔记·ajax·vue·axios·node
永卿00140 分钟前
设计模式-观察者模式
java·前端·设计模式
C雨后彩虹1 小时前
行为模式-观察者模式
java·观察者模式·设计模式
天天摸鱼的java工程师1 小时前
百万数据导出Excel:从新手坑到老鸟方案
java·后端·面试
愿你天黑有灯下雨有伞1 小时前
从数据库到播放器:Java视频续播功能完整实现解析
java·数据库·音视频
hqxstudying1 小时前
Java行为型模式---观察者模式
java·开发语言·windows·观察者模式
DKPT1 小时前
Java观察者模式实现方式与测试方法
java·笔记·学习·观察者模式·设计模式