Springboot（2.7.6）单体工程-上传图片文件（Q）

基于springboot的文件上传功能，不需要额外引入第三方依赖，因为已经内置在SpringMVC框架中，并且做了大量的封装，编写上传功能已经变得非常简单。

第一步 application-dev.yml

新增如下配置，该配置可以限制上传文件的大小

spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB

• max-file-size：属性用于设置单个上传文件的最大大小

• max-request-size: 属性则用于设置整个请求中允许的最大文件大小，可能包含多个文件

第二步 application-dev.yml

上传目录自定义 ，这一步是可选的，也可以写死在代码中

my:
  uploadPath: D:\upload\

第三步 FileController中编写上传接口

@RestController
@RequestMapping("/file")
@Slf4j
public class FileController {


    /**
     * 从配置文件中取值上传目录
     */
    @Value("${my.uploadPath}")
    private  String  uploadFilePath;

    /**
     *
     * @param myFile  上传文件字段名
     * @return
     */
    @PostMapping("/upload")
    public   Result    commonUploadFile( @RequestParam("myFile")  MultipartFile    myFile ){
        if(myFile.isEmpty()){
              return  Result.FAIL("上传文件是空");
        }
        //重命名：时间戳+文件后缀
        String  newName=System.currentTimeMillis()+"_"+myFile.getOriginalFilename().substring(myFile.getOriginalFilename().lastIndexOf("."));
        try {
            //如果文件目录不存在就创建文件夹
            File file  =new File(uploadFilePath);
            if(!file.exists()){
                file.mkdir();
            }
            // 把文件运输到指定的服务器目录中
            myFile.transferTo(new File(uploadFilePath+newName));
        } catch (IOException e) {
            log.error("上传文件异常{}",e.getMessage());
            return  Result.FAIL("上传文件异常");
        }
        return  Result.OK("上传文件成功",newName);

    }

}

第四步 PostMan测试

第五步 静态资源配置

默认情况下，所有的http访问都会当做Controller请求处理，如果你访问服务端的静态资源（图片、文件、css、js等），必须做特殊的配置，否则springMVC都当做接口请求了。

在config目录(没有就新建)中新增或修改WebConfig 配置类

@Configuration
public class WebConfig  implements WebMvcConfigurer {


    @Value("${my.uploadPath}")
    private  String  uploadFilePath;


   /**
     * “static“是访问图片资源的时候，添加的相对路径，用来区分接口请求，做动静分离用 
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //静态资源映射
        registry.addResourceHandler("/static/**").addResourceLocations("file:"+uploadFilePath);
        WebMvcConfigurer.super.addResourceHandlers(registry);
    }



}

第五步 在浏览器中访问这张图片

http://localhost:3000/static/1723781041222_.jpg

第六步 前端使用ElementUI 上传控件

在跨域的前提下，使用前端组件上传图片，更加方便简单

<template>
  <el-upload
      class="upload-demo"
      drag
      name="myFile"
      action="http://localhost:3000/file/upload"
      multiple
      :on-success="doSuccess"
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      Drop file here or <em>click to upload</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>


  <div>
    {{myImage}}
    <el-image  :src="'http://localhost:3000/static/'+myImage" />
  </div>

</template>

    import {ref} from "vue";
    import { UploadFilled } from '@element-plus/icons-vue'
    const  myImage  =ref('')

    const  doSuccess =(data)=>{
      myImage.value=data.data;
    }

• action: 上传接口地址

• name: 上传文件字段 ，跟后端接口参数 “myFile” 对应

• doSuccess ：上传成功之后的回调函数

• 其他属性不重要，请看组件文档