java+vue使用el-upload上传到阿里云oss

---

前言

项目中要实现上传到阿里云oss功能，为了降低服务器压力，使用STS方式进行上传 1.后端返回AccessKey ID，AccessKey Secret，stsToekn。 2.前端调用接口获取秘钥等信息进行上传

官方文档

后端地址：https://help.aliyun.com/document_detail/32007.html
前端地址：https://help.aliyun.com/document_detail/64041.html

一、后端JAVA代码

1.引入依赖

        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-core</artifactId>
            <version>4.5.25</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.aliyun/aliyun-java-sdk-sts -->
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-sts</artifactId>
            <version>3.0.2</version>
        </dependency>
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.8.0</version>
        </dependency>

2.具体实现

import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;
import com.aliyuncs.sts.model.v20150401.AssumeRoleRequest;
import com.aliyuncs.sts.model.v20150401.AssumeRoleResponse;
/**
 * @author Superlu
 * @version 1.0.0
 * @ClassName StsServiceSample
 * @Description TODO
 * @createTime 2021/12/13 13:57
 */

public class StsServiceSample {

    public static AssumeRoleResponse getRoleRequest(String userId,String path){
        // STS接入地址，例如sts.cn-hangzhou.aliyuncs.com。
        String endpoint = "###############";
        // 填写步骤1生成的访问密钥AccessKey ID和AccessKey Secret。
        String AccessKeyId = "####################";
        String accessKeySecret = "#######################";
        // 填写步骤3获取的角色ARN。
        String roleArn = "#########################";
        // 自定义角色会话名称，用来区分不同的令牌，例如可填写为SessionTest。
        String roleSessionName = userId;
        // 以下Policy用于限制仅允许使用临时访问凭证向目标存储空间examplebucket上传文件。
        // 临时访问凭证最后获得的权限是步骤4设置的角色权限和该Policy设置权限的交集，即仅允许将文件上传至目标存储空间examplebucket下的exampledir目录。
        String policy = "{\n" +
                "    \"Version\": \"1\", \n" +
                "    \"Statement\": [\n" +
                "        {\n" +
                "            \"Action\": [\n" +
                "                \"oss:PutObject\"\n" +
                "            ], \n" +
                "            \"Resource\": [\n" +
                "                \"acs:oss:*:*:########桶##########/"+path+"/*\" \n" +
                "            ], \n" +
                "            \"Effect\": \"Allow\"\n" +
                "        }\n" +
                "    ]\n" +
                "}";
        AssumeRoleResponse response=new AssumeRoleResponse();
        try {
            // regionId表示RAM的地域ID。以华东1（杭州）地域为例，regionID填写为cn-hangzhou。也可以保留默认值，默认值为空字符串（""）。
            String regionId = "###############";
//            // 添加endpoint。
//            DefaultProfile.addEndpoint(regionId, "Sts", endpoint);
            // 构造default profile。
            IClientProfile profile = DefaultProfile.getProfile(regionId, AccessKeyId, accessKeySecret);
            // 构造client。
            DefaultAcsClient client = new DefaultAcsClient(profile);
            final AssumeRoleRequest request = new AssumeRoleRequest();
            request.setSysMethod(MethodType.POST);
            request.setRoleArn(roleArn);
            request.setRoleSessionName(roleSessionName);
            request.setPolicy(policy); // 如果policy为空，则用户将获得该角色下所有权限。
            request.setDurationSeconds(3600L); // 设置临时访问凭证的有效时间为3600秒。
            response = client.getAcsResponse(request);
            System.out.println("Expiration: " + response.getCredentials().getExpiration());
            System.out.println("Access Key Id: " + response.getCredentials().getAccessKeyId());
            System.out.println("Access Key Secret: " + response.getCredentials().getAccessKeySecret());
            System.out.println("Security Token: " + response.getCredentials().getSecurityToken());
            System.out.println("RequestId: " + response.getRequestId());

        } catch (ClientException e) {
            System.out.println("Failed：");
            System.out.println("Error code: " + e.getErrCode());
            System.out.println("Error message: " + e.getErrMsg());
            System.out.println("RequestId: " + e.getRequestId());
        }
        return response;
    }
}

二、前端调用

1.引入库

npm install ali-oss      

2.工具类oss.js

import {ElMessage} from "element-plus";
import OSS from 'ali-oss'
import { uuid } from 'vue-uuid';
//  上传
export const uploadFile =  (data, option) => {
    let client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
        region: data.region,
        secure: true,//*这句话很重要！！！！！！！！！
        endpoint: data.endpoint,//这句话更重要,不设置为报错。STS接入地址，例如sts.cn-hangzhou.aliyuncs.com。
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        accessKeyId: data.accessKeyId,
        accessKeySecret: data.accessKeySecret,
        // 从STS服务获取的安全令牌（SecurityToken）。
        stsToken: data.stsToken,
        refreshSTSToken: async () => {
            // 向您搭建的STS服务获取临时访问凭证。
            const info = await fetch('your_sts_server');
            return {
                accessKeyId: info.accessKeyId,
                accessKeySecret: info.accessKeySecret,
                stsToken: info.stsToken
            }
        },
        // 刷新临时访问凭证的时间间隔，单位为毫秒。
        refreshSTSTokenInterval: 300000,
        // 填写Bucket名称。
        bucket: data.bucket
    });
    let file=option.file
    let objectKey = uuid.v1()+ '_' + file.name;
    return new Promise(async (resolve, reject) => {
        await client.multipartUpload(data.path + "/" + objectKey, file,
            {
                progress: async function (p) {
                    let e = {};
                    e.percent = p * 100;
                    option.onProgress(e)
                }
            }).then(result => {
            resolve({
                code : result.res.statusCode,
                name : result.name,
                msg : "ok"
            });
        }).catch(err => {
            console.error('上传出错了',err);
            ElMessage.error('上传出错了');
            reject({code : -1 , url : "", objectKey : "", msg : "上传出错了"});
        });
    })

};

3.页面使用

1. auto-upload为取消自动上传
2. httpRequest手动上传方法

 <el-upload
          action=""
          ref="upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileLists"
          :auto-upload="false"
          :http-request="httpRequest"
      >
        <el-button type="primary">Click to upload</el-button>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
       <el-button type="primary" @click="handleUploadSubmit">upload</el-button>

实现方法

 handleUploadSubmit() {
      this.$refs['upload'].submit();
    }
httpRequest(){
//调用服务端接口
 createUploadStsToken(this.folderId).then(async res => {
        //上传到oss
        uploadFile(res.data, option).then(result => {
         //此处为上传成功后的返回自己的业务
        })

      })}