关于腾讯云:vue3腾讯云上传文件

28次阅读

共计 966 个字符，预计需要花费 3 分钟才能阅读完成。

npm i cos-js-sdk-v5 --save

// 获取上传受权信息
getUploadAuth() {
    let self = this;
    API.authInfo().then(res => {self.uploadSign = res.data;})
}

<template>
    <el-upload :auto-upload="false" ref="upload">
        <el-button size="small" plain type="primary"> 抉择文件 </el-button>
    </el-upload>
</template>

// 点击上传文件
clickUpload() {
    let self = this;
    self.$refs.upload.submit(); // 勾销主动上传性能，需调用 el-uplaod 的 submit();
    self.$message.success('正在上传文件，请稍后');
    let cos = new COS({ // 创立一个 COS 实例
        getAuthorization(options, callback) {
            callback({
                TmpSecretId: self.uploadSign.Credentials.TmpSecretId, // 申请接口返回的数据
                TmpSecretKey: self.uploadSign.Credentials.TmpSecretKey, // 申请接口返回的数据
                SecurityToken: self.uploadSign.Credentials.Token, // 申请接口返回的数据
                ExpiredTime: self.uploadSign.ExpiredTime // 申请接口返回的数据
            });
        }
    });
    cos.putObject({
        Bucket: '', // 例如，examplebucket-1-1250000000
        Region: '', // 地区
        Key: fileName, // 上传的文件名
        StorageClass: 'STANDARD',
        Body: fileContent, // 上传文件对象
        }, function(err, data) {
            // err 上传失败
            // data 上传胜利
            // data.Location 上传胜利后的地址，如需在页面渲染需退出前缀 'http://' 或是 'https://'
    })
}

正文完