vue3+springboot文件上传与下载

文件上传：

前端：

自定义请求函数：
const handleFileUpload=(file,row)=>{
    const formData = new FormData();
    // console.log(file);
    formData.append("file",file.file);
    formData.append('id',row.id);

    link(apiUrl.uploadHeadImageWithId,"POST",formData).then((result) => {
      if(result.data.code===200){
        console.log("图片地址",result.data.result);
        row.headImageUrl = result.data.result;
        ElMessage.success("图片上传成功");
      }else if(result.data.code===500){
        ElMessage.error("图片上传失败");
      }
    }).catch((err) => {
      ElMessage.error("图片上传失败");
    });
  }

后端：

 @ApiOperation("上传头像图片")
    @PostMapping("/uploadHeadImageWithId")
    public Result<String> uploadHeadImageWithId(
            @RequestParam("file") MultipartFile file,
            @RequestParam(name="id",required = true) Integer id) {
        Result<String> result = new Result();
        ......
      return result;
    }

下载：

前端：

先封装请求

import service from "../util/service.js"
// 封装相关的数据请求

let fileDownload=(url,method='get',data,params)=>{
    return new Promise((resolve,reject)=>{
        service.request({
            url,
            method,
            data, //post发送的相关数据
            params, //get发送的相关数据
            responseType: 'blob',
        }).then((ok)=>{
            resolve(ok)
        }).catch((err)=>{
            reject(err)
        })
    })
}

service.js对应的代码
import router from "@/router";
import axios from "axios";
import { ElMessage } from "element-plus";
// import { useStore } from "vuex";
// let store = useStore();
import store from '../store/index'
import apiUrl from "@/api/url";

let axiosurl="";

if(process.env.NODE_ENV==="development"){
    axiosurl=process.env.VUE_APP_BASE_API
}else{
    axiosurl=process.env.VUE_APP_BASE_API
}
//创建axios实例
const service = axios.create({
    baseURL:axiosurl
})

//请求和响应拦截器
    
//添加请求拦截器
service.interceptors.request.use(function (config){
    // console.log("添加请求头");
    //在发送请求之前做什么,头部添加token
    config.headers['Authorization'] = localStorage.getItem("Authorization"); // 添加Authorization头部 Bearer 
    // config.headers['Content-Type'] = 'application/json;charset=utf-8'; // 添加Content-Type头部 这个添加会造成文件上传错误
    return config
},function(error){
    return Promise.reject(error);   
});

// 添加响应拦截器
service.interceptors.response.use(function (response){
    // store = useStore(); //这个store布恩那个这么定义这么定义
    let res = response.data;
    if(res.code===401){
        ElMessage.error("请登录");
        store.commit("SET_NoLogined_BOOL");
        localStorage.removeItem("user");
        localStorage.removeItem("Authorization");
        localStorage.removeItem("logined");
        localStorage.removeItem('headImageUrl');
        router.push('/login');
    }else if(res.code===403){
        router.push('/customerHome');
        ElMessage.error("当前用户无权限");
    }
    //对响应数据做一些东西
    return response;
},function(error){
    console.log(error.code);
    if(error.response===undefined){
        ElMessage.error("无法连接后端服务器！");
        router.push("/");  //和后端断开连接的时候转到首页
    }else{
        switch(error.response){
            case 404:
                ElMessage.error("资源不存在！")
                break;
            case 500:
                ElMessage.error("服务器连接失败！")
                break;
            default:
                ElMessage.error(error.response.status,"未知错误！")
                break;
        }
    }   
    //对响应错误做一些东西
    return Promise.reject(error);
})

export default service; //暴露的挂载在service上的内容

文件下载前端：

let downloadResumeWithId=()=>{
    fileDownload(apiUrl.downloadResumeWithId,'get',{},{id:userInfo.data.id}).then(result => {
      console.log(result);
        const disposition = result.headers['content-disposition'];
        // console.log('文件名',disposition)
        if (disposition === undefined) {
          ElMessage.error('未上传文件');
        }else{
          let fileName = disposition.substring(disposition.indexOf('filename=') + 9, disposition.length)

          // 创建URL
          const objectUrl = URL.createObjectURL(new Blob([result.data]))

          // 通过a标签下载
          const link1 = document.createElement('a')
          link1.href = objectUrl
          link1.download = fileName
          document.body.appendChild(link1)
          link1.click()

          // 释放URL 对象
          window.URL.revokeObjectURL(link1.href)
          document.body.removeChild(link1)
        }
    }).catch((err) => {
      ElMessage.error("下载失败");
    });
  }

文件下载后端：

  @ApiOperation("下载简历文件")
    @GetMapping("/downloadResumeWithId")
    public Result<String> downloadResumeWithId(@RequestParam("id") Integer id, HttpServletResponse response ){
        Result result = new Result();
        try {
 							//。。。。。
            minIoUtil.downloadFile(bucketName, fileName, response);
            result.success("下载成功！");
        } catch (Exception e) {
            e.printStackTrace();
            log.error(e.getMessage());
            result.error500("下载失败!");
        }
        return result;
    }

minIoUtil.downloadFileh函数如下：
   public void downloadFile(String bucketName, String fileName, HttpServletResponse response) throws IOException, InvalidKeyException, InvalidResponseException, InsufficientDataException, NoSuchAlgorithmException, ServerException, InternalException, XmlParserException, ErrorResponseException {
        InputStream fileStream = minioClient.getObject(
                GetObjectArgs.builder()
                        .bucket(bucketName)
                        .object(fileName)
                        .build()
        );
//        String[] strings = fileName.split("/");
//        fileName = strings[strings.length - 1];
//        System.out.println("filename=" + fileName);
        String fileNameCode = new String(fileName.getBytes(StandardCharsets.UTF_8), StandardCharsets.ISO_8859_1);
//        response.setContentType( "application/octet-stream");
        response.setHeader("Content-Disposition", "attachment;filename=" + fileNameCode);
        ServletOutputStream outputStream = response.getOutputStream();
        // 输出文件
        int length;
        byte[] buffer = new byte[1024];
        while ((length = fileStream.read(buffer)) > 0) {
            outputStream.write(buffer, 0, length);
        }
        outputStream.flush();
        fileStream.close();
        outputStream.close();
    }