使用OSS阿里上传文件

阿里云对象存储服务（Alibaba Cloud Object Storage Service，简称OSS）是阿里云提供的一种高可靠、安全、低成本的云端存储服务。用户可以通过简单的 API 接口在任何时间、任何地点存储和访问各种类型的数据，如图片、视频、文档等。

阿里云OSS具有以下特点和优势：

1. 高可靠性：OSS采用多副本存储和容灾设计，保证数据的高可靠性和持久性。
2. 安全性：提供多种安全措施，如数据加密、访问控制、防盗链等，确保数据的安全性。
3. 低成本：按照实际使用量计费，灵活且成本低廉。
4. 高扩展性：支持海量数据存储和高并发访问，满足不同规模和需求的用户。
5. 灵活性：支持多种数据类型和访问方式，适用于各种场景和应用。

用户可以通过阿里云控制台、API接口或SDK等方式管理和使用OSS服务，实现数据的存储、备份、共享和分发等功能。

1、阿里云官网找到对象存储oss

2、点击控制台

3、点击bucket列表 (如果没有bucket  点击创建bucket)

4创建密钥和AccessKey

5、创建accessKey（切记！！！key和密钥必须记住）

在application.yml中配置相应的配置

file:
  alicloud:
    bucket-name: ymcc-pl #上传空间bucket
    access-key:  #你的AccessKey
    secret-key:  #你的秘钥
    endpoint: oss-cn-chengdu.aliyuncs.com  #上传端点

写一个读取yml的工具类

 

@Data
@Component
@ConfigurationProperties(prefix = "file.alicloud") #读取application.yml中  file.alicoud中的信息  并赋值给对应的属性
public class AlicloudOSSProperties {

    private String bucketName;
    private String accessKey;
    private String secretKey;
    private String endpoint;
}

创建OSSclient实例对象（直接cv）

    @GetMapping("/uploadImg")
    public AjaxResult ossSign(){
        // host的格式为 bucketname.endpoint
        String host = "https://" + properties.getBucketName() + "." + properties.getEndpoint();
        // 用户上传文件时指定的前缀。不同的业务可以指定不同的前缀 用来做区分
        String dir = "ymcc";
        // 创建OSSClient实例。
        OSS ossClient = null;
        try {
            //策略过期时间
            long expireTime = 100;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);

            // PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            // 创建OSSClient实例。
            ossClient = new OSSClientBuilder()
                    .build(properties.getEndpoint(), properties.getAccessKey(), properties.getSecretKey());

            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            //签名
            String postSignature = ossClient.calculatePostSignature(postPolicy);

            //返回签名及OSS相关参数
            Map<String, String> respMap = new LinkedHashMap<String, String>();
            respMap.put("accessid", properties.getAccessKey());
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));

            return new AjaxResult(200,"上传成功！",respMap);
        } catch (Exception e) {
            e.printStackTrace();
            System.out.println(e.getMessage());
        } finally {
            if(ossClient != null){
                ossClient.shutdown();
            }
        }
        return null;
    }

vue集成elmentUI

<el-upload
            class="avatar-uploader "
            action="http://ymcc-pl.oss-cn-chengdu.aliyuncs.com"
            :data="uploadPicData"
            :show-file-list="false"
            :on-success="handlePicSuccessEffect"
            :before-upload="beforePicUpload">
            <img v-if="form.effect" :src="form.effect" class="avatar" >
            <i v-else class="el-icon-plus avatar-uploader-icon-effect"></i>
          </el-upload>

 :on-success：上传成功之后需要调用的方法

:before-upload：上传之前需要调用的方法(获取OSSclient实例对象)

    async beforePicUpload() {
      await this.getSign(this.uploadPicData);
    },
    async getSign(data) {
      //让这个请求变成同步请求
        //发送请求到后端 获取到实例对象
      await uploadImg().then(response => {
        //设置相关的参数
        var resultObj = response.data;
        console.log(resultObj)
        data.policy = resultObj.policy;
        data.signature = resultObj.signature;
        data.ossaccessKeyId = resultObj.accessid;
        data.dir = resultObj.dir;
        data.host = resultObj.host;
        //上传的文件名，使用UUID处理一下
        data.key = resultObj.dir + '/' + this.getUUID() + '_${filename}';

      });
    },
    handlePicSuccess(res, file) {
      var urlPath = this.uploadPicData.host + '/' + this.uploadPicData.key.replace("${filename}", file.name);

        this.form.icon = urlPath;
      this.$message({message: '上传成功', type: 'success'});
    },

执行效果