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 InitializingBean {
    @Value("${oss.endpoint}")
    private String endpoint;
    @Value("${oss.access-key}")
    private String keyId;
    @Value("${oss.secret-key}")
    private String keySecret;
    @Value("${oss.bucket}")
    private String bucketName;
    /**定义公开静态常量*/
    public static String END_POIND;
    public static String ACCESS_KEY_ID;
    public static String ACCESS_KEY_SECRET;
    public static String BUCKET_NAME;
    @Override
    public void afterPropertiesSet() throws Exception {
        END_POIND = endpoint;
        ACCESS_KEY_ID = keyId;
        ACCESS_KEY_SECRET = keySecret;
        BUCKET_NAME = bucketName;
    }
}

Service层

public interface OssService {
    String  uploadOssFile(String name,MultipartFile file);
}

实现层

@Service
public class OssServiceImpl implements OssService {
    @Override
    public String uploadOssFile(String name,MultipartFile file)  {
        // 工具类赋值
        String endpoint = ConstantPropertiesUtils.END_POIND;
        String accessKeyId = ConstantPropertiesUtils.ACCESS_KEY_ID;
        String accessKeySecret = ConstantPropertiesUtils.ACCESS_KEY_SECRET;
        String bucketName = ConstantPropertiesUtils.BUCKET_NAME;
        try{
            // 创建OSSClient实例。
            OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
            // 获取文件输入流
            InputStream inputStream = file.getInputStream();
            //获取文件名
            String filename = file.getOriginalFilename();
            //1.在文件名称里面添加随时唯一的值
            String uuid = UUID.randomUUID().toString().replaceAll("-","");
            //拼接文件名
            filename = uuid +filename;
            //2.文件分类存储
            //工具类的使用--处理时间格式
            String folder = new DateTime().toString("yyyy/MM/dd");
            if(name==null){
                name="weizhi";
            }
            filename = name+"/"+folder+"/"+filename;
            //调用OSS方法实现上传<yourObjectName>：aa/bb/文件名文件夹名称inputStream上传文件输入流
            ossClient.putObject(bucketName, filename, inputStream);
            // 关闭OSSClient。
            ossClient.shutdown();
            //返回上传后的文件名
            String url = "https://"+bucketName+"."+endpoint+"/"+filename;
            return url;
        }catch (Exception e){
            e.printStackTrace();
            return null;
        }
    }
}

Controller层--此处我用封装的响应工具，你可以直接返回字符串，@ApiOperation是Swagger-UI的注解，可不加

@RestController
@RequestMapping("file")
@CrossOrigin
@Api(tags = "OSS文件上传")
public class OssController {
    @Resource
    private OssService ossService;
    @ApiOperation("Oss文件上传")
    @PostMapping("/uploadOssFile")
    public ResultVO<String> uploadOssFile(@ApiParam("上传的文件夹")String name, MultipartFile file){
        //获取上传文件
        //返回上传后地址
        String ossFile = ossService.uploadOssFile(name,file);
        return ResultUtil.success(ossFile);
    }
}

此时后端的基本完成---每次上传都会返回文件的url路径
接下来来看看前端的几种上传方式
使用Element-ui的文件上传组件

直接上传的方式

获取返回的URL
2.携带多个参数的上传---
简易封装一下请求---多余的被我删了，只留关键的
编写请求的方法
使用组件上传---记得在使用的页面导入上面的js

后端接收
获取签名的直传的方式---我使用微服务版的OSS

<dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
            <version>0.9.0.RELEASE</version>
</dependency>

@RestController
@Api(tags = "文件上传")
@RequestMapping("/file")
public class FilesUploadController {
    @Resource
    OSS client;
    @Value("${spring.cloud.alicloud.oss.endpoint}")
    private String endpoint;
    @Value("${spring.cloud.alicloud.oss.bucket}")
    private String bucket;
    @Value("${spring.cloud.alicloud.access-key}")
    private String accessId;
    @ApiOperation("获取签名直传OSS")
    @RequestMapping("/oss/policy")
    public ResultVO<Map<String, String>> policy(){
        // host的格式为 bucketname.endpoint
        String host = "https://" + bucket + "." + endpoint;
        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        // 用户上传文件时指定的前缀。
        String dir = format+"/";
        Map<String, String> respMap = null;
        try {
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
            String postPolicy = client.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = client.calculatePostSignature(postPolicy);
            respMap = new LinkedHashMap<String, String>();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
        } catch (Exception e) {
            System.out.println(e.getMessage());
        } finally {
            client.shutdown();
        }
        return ResultUtil.success(respMap);
    }

前端

原文链接：https://blog.csdn.net/HQJ520/article/details/108306698