Vue上传阿里云OSS(STS方式)

落日映苍穹つ 2022-10-02 11:58 727阅读 0赞

一、准备工作

1. 开通阿里云OSS服务，从控制台上获取AccessKeyId和AccessKeySecret。

2. 创建Bucket，并登录OSS控制台

3. 配置Bucket (很重要)

*  将allowed origins（来源）设置成 \*
 *  将allowed methods（允许methods）设置成 PUT, GET, POST, DELETE, HEAD
 *  将allowed headers（允许headers）设置成 \*
 *  将expose headers（暴露headers）设置成 ETag   （这里需要换行）  x-oss-request-id

可参考阿里官方文档：[https://help.aliyun.com/docum...][https_help.aliyun.com_docum...]

二、引入ali-oss

有两种方式：

1. 在HTML文件的<head>中包含如下标签：

2. 项目中安装ali-oss

npm install ali-oss --save

可参考阿里官方文档：[https://github.com/ali-sdk/al...][https_github.com_ali-sdk_al...]

这里使用第二种。

三、使用OSS

关于直传，阿里官方给了三种方案：

1.  客户端 JavaScript 签名后直传；
2.  客户端申请服务端签名，然后打包上传；
3.  客户端申请服务端签名，打包上传OSS后回调服务端。

这里使用第一种。

vue中使用步骤：

1.  在src目录中创建utils文件夹
2.  utils文件夹中创建Client.js
3.  在组件中创建testUpload.vue文件

//Client.js 
    const OSS = require('ali-oss');
    
    export default function Client(data) {
        //后端提供数据
        return new OSS({
            region: data.region,  //oss-cn-beijing-internal.aliyuncs.com
            accessKeyId: data.accessKeyId,
            accessKeySecret: data.accessKeySecret,
            stsToken: data.stsToken,
            bucket: data.bucket
        })
    }

//testUpload.vue 
    <template>
        
        <div>
            <el-upload
                    class="upload-demo"
                    ref="upload"
                    drag
                    :before-upload="beforeUpload"
                    :on-success="handleSuccess"
                    :http-request="handleHttpRequest"
                    :headers="uploadHeaders"
                    :limit="files"
                    :disabled="disabled"
                    multiple
                    action=""
                    :file-list="fileList">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
            </el-upload>
        </div>
    </template>
    
    <script type="text/ecmascript-6">
        import Client from '../../utils/Client'
        //将渲染的内容导出
        export default{
            props: {},
            data(){
                return {
                    region: 'oss-cn-beijing',
                    bucket: '',//这里选择OSS容器
                    percentage: 0,
                    url: '',//后台获取token地址
                    ClientObj: null,
                    dataObj: {},
                    expiration: '',
                    fileList: [],
                    files: 10,
                    uploadHeaders: {
                        authorization: '*'
                    },
                    disabled: false,
                }
            },
            methods: {
                getDate(){
                    const date = new Date(),
                        year = date.getFullYear(),
                        month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`,
                        day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`,
                        hh = date.getHours() > 9 ? date.getHours() : `0${date.getHours()}`,
                        mm = date.getMinutes() > 9 ? date.getMinutes() : `0${date.getMinutes()}`;
                        return `${year}${month}${day}${hh}${mm}`;
                },
                getAliToken(){ //获取Token
                    return new Promise((resolve, reject) => {
                        this.$axios({
                            method: 'POST',
                            url: this.url
                        }).then(res => {
                            if (res.success) {
                                const {expiration, tempAk, tempSk, token} = res.data;
                                this.expiration = expiration;
                                this.dataObj = {
                                    region: this.region,
                                    bucket: this.bucket,
                                    accessKeyId: tempAk,
                                    accessKeySecret: tempSk,
                                    stsToken: token
                                };
                                resolve(true);
                            } else {
                                reject(false);
                            }
                        }).catch(err => {
                            console.log(err);
                            reject(false);
                        })
                    })
                },
                beforeUpload(file){
                    return new Promise((resolve, reject) => {
                        this.getAliToken().then(response => {
                            if (response) {
                                resolve(response);
                            } else {
                                reject(response);
                            }
                        }).catch(err => {
                            console.log(err);
                            reject(err);
                        });
                    })
                },
                async handleHttpRequest(option){ //上传OSS
                    try {
                        let vm = this;
                        vm.disabled = true;
                        const client = Client(this.dataObj), file = option.file;
                        //随机命名
                        const random_name = this.random_string(6) + '_' + new Date().getTime() + '.' + file.name.split('.').pop();
                        // 分片上传文件
                        await client.multipartUpload(random_name, file, {
                            progress: async function (p) {
                                let e = {};
                                e.percent = p * 100;
                                option.onProgress(e)
                            }
                        }).then(({res}) => {
                            console.log(res);
                            if (res.statusCode === 200) {
                                // option.onSuccess(ret)
                                return res.requestUrls
                            } else {
                                vm.disabled = false;
                                option.onError('上传失败');
                            }
                        }).catch(error => {
                            vm.disabled = false;
                            option.onError('上传失败');
                        });
    
                    } catch (error) {
                        console.error(error);
                        this.disabled = false;
                        option.onError('上传失败');
                    }
                },
                handleSuccess(response, file, fileList){
                    console.log(response);
                    console.log(file);
                    console.log(fileList);
                },
                // 随机生成文件名
                random_string(len) {
                    len = len || 32;
                    let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz12345678', maxPos = chars.length, pwd = '';
                    for (let i = 0; i < len; i++) {
                        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
                    }
                    return pwd;
                }
            },
            watch: {
                url(val){
                    if (val) {
                        this.urls.push(val);
                    }
                }
            },
            components: {},
            computed: {},
            watch: {},
            created(){
                this.getAliToken();
            },
            mounted(){
            },
    
        }
    </script>
    
    <style scoped>
        /**渲染内容的样式**/
    
    </style>

完成上传

[https_help.aliyun.com_docum...]: https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.989.26a459662WQfhJ
[https_github.com_ali-sdk_al...]: https://github.com/ali-sdk/ali-oss