vue3+Element-UI+SpringBoot+阿里云OSS(直接上传+携带额外参数上传+获取签名直传)等各种文件上传方式详细使用案例

• 创建vue项目--必要依赖:axios(发送请求)和Element-ui
• 创建后端项目

必要依赖

 <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.8.0</version>
 </dependency>
<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
</dependency>

• 后端解决跨域--非常有用的方法

@Configuration
public class JsonConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            //重写父类提供的跨域请求处理的接口
            public void addCorsMappings(CorsRegistry registry) {
                //添加映射路径
                registry.addMapping("/**")
                        //放行哪些原始域
                        .allowedOrigins("*")
                        //是否发送Cookie信息
                        .allowCredentials(true)
                        //放行哪些原始域(请求方式)
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        //放行哪些原始域(头部信息)
                        .allowedHeaders("*")
                        //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                        .exposedHeaders("Header1", "Header2");
            }
        };
    }
}

• application.yml配置

• oss:
    endpoint: oss-cn-chengdu.aliyuncs.com
    bucket: 
    access-key: 
    secret-key: 

  

• OSS设置跨域

• 

• 写一个工具类读取配置文件的内容

@Component
public class ConstantPropertiesUtils implements Initial