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

拼搏现实的明天。 2022-10-24 15:27 250阅读 0赞

安装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);
    	});