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

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