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}`">