1、下载cos-js-sdk-v5.js
下载地址：https://gitee.com/hxnamei/codes/b492wkvnher15p6xyz0q887
2、引入cos-js-sdk-v5.js文件
import COS from '../../../public/jslib/cos-js-sdk-v5'
Vue.prototype.COS = COS，
3.配置腾讯云的存储桶
var COS = Vue.prototype.COS;
var Bucket = "53-1256586210"; //腾讯云对象储存桶名
var Region = "ap-shanghai"; //对象储存你所处的地区编号
var cos = new COS({
getAuthorization: function(options, callback) {
var authorization = COS.getAuthorization({
SecretId: "AKIDujY7RXIWAZqwoSF86pQuJVS9bomUlLQG", // 可传固定密钥或者临时密钥
SecretKey: "wd5IEuNa7OOSJuFe092hPs63mkTyDBwV", // 可传固定密钥或者临时密钥
Method: options.Method,
Pathname: options.Pathname,
Query: options.Query,
Headers: options.Headers,
Expires: 900
});
callback({
Authorization: authorization
// XCosSecurityToken: credentials.sessionToken, // 如果使用临时密钥，需要传 XCosSecurityToken
});
}
});
4、上传和下载的方法
shangchuan(e) {
var file = e.target.files[0];
if (!file) return; // 分片上传文件
var a = Math.random();
//上传
cos.putObject(
{
Bucket,
Region,
// StorageClass: 'STANDARD',
Key: file.name,
Body: file,
onProgress: function(progressData, callback) {
}
},
function(err, data) {
if(data.statusCode == 200){
Vue.prototype.$message({
message: '上传成功',
type: 'success'
})
}else{
Vue.prototype.$message({
message: '上传失败',
type: 'warning'
})
}
}
);
//得到图片的url
cos.getObjectUrl(
{
Key: file.name,
Bucket,
Sign: false,
Region
},
function(err, data) {
// document.getElementById('imgupload').src=data.Url;
}
);
}
5、图片展示
https://20200508-tvweb-1255674295.cos.ap-nanjing.myqcloud.com/+图片名字
注：https://20200508-tvweb-1255674295.cos.ap-nanjing.myqcloud.com/可以通过 cos.getObjectUrl的document.getElementById('imgupload').src=data.Url;获取
例子：
<img :src="`https://20200508-tvweb-1255674295.cos.ap-nanjing.myqcloud.com/${scope.row.background_picture}`">