当前位置: article > 正文

Element - upload 组件文件上传直传阿里云 OSS的两种方式_el-upload oss

作者：不正经 | 2024-02-19 22:39:32

踩

el-upload oss

个人博客同步csdn

0. 准备工作

0.1 oss跨域设置

前往 bucket 中的 权限管理 -> 跨域设置

并如图进行如下设置：

0.2 创建RAM 子用户

其实不创建也可以，但是强烈建议创建一个子用户，因为主体账号含有至高权限，创建子用户可以进行更细粒度的权限管控保证账号资源安全。
创建好后保存好你的子用户 AssessKeyId 和 AssessKeySecret 以及 bucket名称 和 endpoint （地域），后面将会用到

0.3 两种上传方式的不同点

POSTObject方式 采用表单上传，使用 element 的 upload组件 的话可以看到上传进度。
PutObject方式 分简单上传和分片上传两种，只有分片上传才能获取到上传进度（其实就是可以知道上传了几个分片），并且分片上传可以断点续传，没有测试POSTObject方式能不能断点。
在配置方面，POSTObject 比 PutObject要简单些。

1. PostObject 方式

1.1 后端（Java）代码如下

首先导入 Maven 依赖

<dependency>
	<groupId>com.aliyun.oss</groupId>
	<artifactId>aliyun-sdk-oss</artifactId>
	<version>3.10.2</version>
</dependency>
1
2
3
4
5

代码：

private static final String OSS_ENDPOINT = "oss-cn-beijing.aliyuncs.com";
private static final String ACCESS_KEY_ID = "LT***************koSL";
private static final String ACCESS_KEY_SECRET = "a0dXW*****************sSZqt";

public static JSONObject getPostPolicy() throws UnsupportedEncodingException, JSONException {
    OSS ossClient=new OSSClientBuilder().build(OSS_ENDPOINT,ACCESS_KEY_ID,ACCESS_KEY_SECRET);
    // host的格式为 bucketname.endpoint
    String host = StringFormatter.concat("https://", BUCKET_NAME, ".", OSS_ENDPOINT).getValue();
    // callbackUrl为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
    // String callbackUrl = "http://88.88.88.88:8888";
    // 每一天产生一个文件夹
    // 用户上传文件时指定的前缀,如果是 / 则自动检测为文件夹。
    String dir = LocalDate.now().toString() + "/";

    JSONObject jsonObject = new JSONObject();
    //过期时间 100 秒
    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);
    String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
    byte[] binaryData = postPolicy.getBytes(StandardCharsets.UTF_8);
    String encodedPolicy = BinaryUtil.toBase64String(binaryData);
    String postSignature = ossClient.calculatePostSignature(postPolicy);

    jsonObject.put("OSSAccessKeyId", ACCESS_KEY_ID);
    jsonObject.put("policy", encodedPolicy);
    jsonObject.put("signature", postSignature);
    jsonObject.put("dir", dir);
    jsonObject.put("host", host);
    jsonObject.put("expire", String.valueOf(expireEndTime / 1000));
    return jsonObject;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

1.2 前端

<template>
    <div>
        <el-upload style="width: 340px" class="upload-demo" drag
                   action="https://***你的bucket名称****.***你的bucket地域***.aliyuncs.com"
                   :file-list="files"
                   :auto-upload="true"
                   :before-upload="beforeLoad"
                   :on-success="onSuccess"
                   :data="extraData"
                   :before-remove="beforeRemove">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">不超过500kb</div>
        </el-upload>
    </div>

</template>

<script>
    import {postPolicy} from "@/network/details/ossPolicy";

    export default {
        name: "upload",
        data: () => ({
            statusMsg: "",
	    //post方式的表单域信息
            extraData: {},
            files: []
        }),
        watch: {
            statusMsg(val) {
                console.log(val)
            }
        },
        methods: {
	    // 因为向后端请求policy是异步的，我们这里同步处理就加上async
            async beforeLoad(file) {
                console.log("beforeLoad")
                console.log(file)
		//同步处理加上 await
                await postPolicy().then(res => {
                    this.extraData = {...res.data}
		    // key就是上传的文件的路径，这个是postobject的必须参数
                    this.extraData.key = res.data.dir + file.uid + "_" + file.name
                    console.log(res)
                    console.log(this.extraData)
                })
            },
            beforeRemove(file) {
                console.log("beforeRemove")
                let i = this.files.indexOf(file)
                this.files.splice(i, 1)
            },
            onSuccess() {
                console.log("onSuccess")
            },
            // 停止上传
            stop() {
                console.log("stop")
                this.statusMsg = '停止上传';
                if (ossClient) {
                    ossClient.cancel();
                } else {
                    this.statusMsg = '停止失败';
                }
            }
        }
    }
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

2. PutObject 方式

2.0 配置

此步骤请参考官方文档 STS临时访问凭证配置好后再把相关配置填入代码中

2.1 后端（Java）代码如下