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

最新推荐文章于 2025-10-17 13:34:46 发布

原创

最新推荐文章于 2025-10-17 13:34:46 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端

本文详细介绍了如何使用Vue3、Element-UI库与SpringBoot后端结合，实现阿里云OSS的文件上传，包括直接上传、携带参数上传和获取签名直传等不同方式。首先，文章阐述了前后端项目的创建及必要的依赖设置，如axios和Element-UI。接着，讲解了SpringBoot后端的配置，包括解决跨域问题、OSS设置和编写服务层、控制器层。在前端部分，通过Element-UI的文件上传组件，展示了直接上传和携带额外参数上传的实现。最后，提到了获取签名直传的方式，适用于微服务场景下的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 InitializingBean {
    @Value("${oss.endpoint}")
    private St

最低0.47元/天解锁文章