vue中使用腾讯云上传图片 SDK COS

最新推荐文章于 2025-06-11 09:07:09 发布

Python User

最新推荐文章于 2025-06-11 09:07:09 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：项目开发文章标签： vue

本文链接：https://blog.csdn.net/weixin_44684357/article/details/113415897

项目开发专栏收录该内容

3 篇文章

订阅专栏

本文档展示了如何在Vue项目中安装并封装腾讯云COS-js-sdk-v5，创建utils.js文件，用于获取对象存储的URL。通过设置bucket、region、secretId和secretKey等配置，利用Promise对cos.getObjectUrl方法进行封装，然后将该方法绑定到Vue的原型上，方便在组件中直接调用获取图片链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装sdk依赖:

cnpm i cos-js-sdk-v5 -S

在vue项目中写公共文件，utils.js，用promise 对其进行封装

import COS from 'cos-js-sdk-v5'
const baseCosConfig = {
    bucket: 'baodao-dev-XXX',
    region: 'ap-shanghaiXXXXX'
};

const getUrl = function (key) {
    let data = {
        secretId: 'AKID7Ns7IXXXXXXXX',
        secretKey: 'SeZDeqmHXXXXXXXXXs',
        startTime: 1580000000,
        expiredTime: 1580000900
    }
    let cos = new COS(
        {
            SecretId: data.secretId,
            SecretKey: data.secretKey,
            // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
            StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
            ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000900
        }
    )
    return new Promise((resolve, reject) => {
        cos.getObjectUrl({
            Bucket: baseCosConfig.bucket,
            Region: baseCosConfig.region,     /* 存储桶所在地域，必须字段 */
            Key: key,
            Sign: true,
            Expires: 3600, // 单位秒
        }, function (err, data) {
            resolve(data.Url)
            reject(err)
            console.log(err || data.Url);
        });
    });
}

将该方法绑定到vue的原型上：

import util from "./util/util";
Vue.prototype.$util = util;

使用：promise的调用来请求

this.$util
	.getUrl(data)
	.then((res) => {
	 // res 为返回的图片链接地址
	}).catch((err) => {
    	console.log(err);
	});