vue+springboot实现压缩文件上传到服务器的文件夹里

一、前端实现有两种方式：

1.原始方式：

1.1 整体组件代码：

1.2 上传的方法

import request from "@/utils/request";

export const upload = (params) => {
  return request({
    url: 'http://localhost:8084/gaodeservice/upload',
    method: 'post',
    headers: {
      'Content-Type':'multipart/form-data'
    },
    data: params
  });
}

1.3前端页面视图

2.elementui组件方式：

2.1整体代码：

2.2 前端视图：

 

二、后端方法：

/**
     * 上传文件
     * @param file
     * @return
     * @throws IOException
     */
    @CrossOrigin
    @PostMapping("upload")
    public ApiResult  upload(@RequestPart MultipartFile file) throws IOException {
        ApiResult result=null;
        try{
            if(!file.isEmpty()){
                //获取原始数据文件名
                String originalFilename= file.getOriginalFilename();
                //将文件转存到磁盘路径下
                file.transferTo(new File("D:\\data\\syrq\\ABB\\"+originalFilename));
                result= ApiResult.ok("ok:" + "已上传成功");
            }
        }catch(Exception e){
            result = ApiResult.fail(e.getMessage(), "上传失败");
        }
        return result ;
    }

注意：有的时候上传的文件比较大，后台会直接报错：

这个时候需要在application.yml配置：

spring:
  servlet:
    multipart:
      enabled: true
      max-file-size: 100MB # 单个文件的最大值
      max-request-size: 1000MB # 上传文件总的最大值