ElementUI+Vue+Springboot实现文件上传之——本地存储

本文要解决的是服务器接受前端上传的文件，并存储在服务器的方案。

一、前端

样式：

		  <el-upload
              action="这里是后端的接口要求完整路径：http://..."
              :on-success="handleSuccess"
              :limit="1"
              :file-list="fileList">
            <el-button size="small">上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>

解释

1.action：文件上传的url

2.:on-success="handleSuccess" 上传成功执行的方法，比如：

   

    handleSuccess(res) {
      console.log(res)
    }

3.:limit="1"：最大上传数1

4.:file-list="fileList"：展示文件列表，需要在数据区定义fileList

二、后端

1.接口

    //前端页面三要素：表单项type="file" 表单提交方式post 表单的enctype属性为multipart/form-data
    //后端接收文件接口API：MultipartFile（注意名字要一样）
    //文件上传到服务端，有几个内容就形成几个临时文件（供保存），响应完成后就自动删除
    @PostMapping("/接口路径")
    public Result upload(MultipartFile file) throws Exception {
        //文件存盘
        //1.生成文件名uuid：一种固定长度且不重复的随机值，使用 UUID.randomUUID().toString() 可以得到其字符串
        String fileName = UUID.randomUUID().toString();
        //2.获取文件类型
        String originalFilename = file.getOriginalFilename(); // 这里获取原始文件名
        String typeName = originalFilename.substring(originalFilename.lastIndexOf("."));
        //3.拼接
        String fileNewName=fileName+typeName;
        //4.文件存盘
        file.transferTo(new File("文件保存位置"+fileNewName));

        return Result.success();
    }

2.处理跨域问题

引入依赖pom.xml

        <!--跨域配置-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

在config包下新建CorsConfig类

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}