SpringBoot + vue 实现文件上传

概述文件上传使用场景

• 文件上传，是程序开发中必会用到的一个功能，比如

  1. 添加商品、用户头像、文章封面等
  2. 富文本编辑（插件文件上传）

• 文件上传原理
  把本地文件上传到服务器，实现资源共享

SpringBoot实现本地文件上传

搭建后台接口

1. 相关依赖

<!--SpringMVC的启动器-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--用来处理文件上传的一个通用工具类-->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>
<!--lombox插件-->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
</dependency>

2. 文件上传相关配置
   在项目application.yml文件中配置文件上传相关的配置信息

# 文件上传配置
files:
  upload:
#    path: D:/代码/小白做毕设2022/files/
    # 文件上传目标路径
    path: /Users/fangqi174956/Desktop/java/project/pure-design-master/files/
    # 文件上传允许的类型
    allowTypes:
      - image/jpeg
      - image/png
      - image/jpg
      - image/gif
      - text/html
      - text/css
      - application/msword
      - application/pdf
      - application/vnd.ms-excel

3. 创建FileUploadProperties.java类
   读取application.yml文件中配置文件上传相关的配置信息

import java.util.List;

/**
 * 使用ConfigurationProperties将配置读取到Java文件中
 * @author fangqi174956
 */

@Data
@Component
@ConfigurationProperties(prefix = "files.upload")
public class FileUploadProperties {
   

    private String path;
    private List<String> allowTypes;

}

4. 文件上传的配置类
   对上传文件的大小进行限制

/**
 * 文件上传功能配置类
 * @author fangqi174956
 */

@Configuration
public class FileUploadConfig {
   
    /**   单个数据大小 10M  */
    private static final String SINGLE_FILE_SIZE = "10240KB";
    /** 总上传数据大小 100M */
    private static final String TOTAL_FILE_SIZE = "10240KB";

    @Bean
    public MultipartConfigElement multipartConfigElement() throws IOException {
   
        MultipartConfigFactory factory = new MultipartConfigFactory();
        factory.setMaxFileSize(DataSize.parse(SINGLE_FILE_SIZE));
        ///
        factory.setMaxRequestSize(DataSize.parse(TOTAL_FILE_SIZE));
        return factory.createMultipartCo