最近在做网页的时候，遇到一个上传图片的功能，经商量后，打算直接上传到腾讯云对象存储上并获得储存地址来返回给后端。因为用的是vue框架，所以在这个过程中遇到一些问题，把它记录下来，希望对大家有所帮助。
1，SDK 获取
对象存储服务的 XML JS SDK 资源 github 地址：tencentyun/cos-js-sdk-v5。
然后下载在index.html中引入：
下面是我的index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>对象储存</title>
<link rel="stylesheet" href="static/animate.css" />
<script type="text/javascript" src="./static/cos-js-sdk-v5.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
接下来在需要用到上传文件的组件结构中加上input，type为file，添加一个change事件，通过$event来把input中的传到shangchuan这个方法中
<div class="content">
<input id="file" type="file" @change='shangchuan($event)'>
</div>
然后是该组件的script中的操作
<script>
var Bucket ='smarthome-1256847421';//腾讯云对象储存桶名
var Region = 'ap-guangzhou';//对象储存你所处的地区编号，这里是广州
var cos = new COS({
getAuthorization: function (options,callback) {
var authorization = COS.getAuthorization({
SecretId: 'AKxxxxxxxxxxxxs6', //这是密钥ID
SecretKey: 'Uxxxxxxxxxxxxxxxxxxxymb', //这是密钥的钥匙（哇，我都不知道怎么说了，总之是在腾讯云对象储存上注册登录后你要申请的东西）
Method: options.Method,
Key: options.Key,
Query: options.Query,
Headers: options.Headers,
Expires: 60,
});
callback(authorization);
}
});
export default {
data(){
return{
}
},
mounted:function(){
},
methods:{
shangchuan(e){
var file = e.target.files[0];
if (!file) return;
// 分片上传文件
cos.putObject({
Bucket: Bucket,
Region: 'ap-guangzhou',
Key: file.name,
Body: file,
onProgress: function (progressData,callback) {
logger.log(JSON.stringify(progressData));
},
}, function(err, data) {
// console.log(err,data);
});
//下面这个方法是vue中获取你上传成功后的Url地址，别人可以通过这个地址来查看，下载你上传的文件
cos.getObjectUrl({
Key: file.name,
Bucket: Bucket,
Sign: false,
Region: 'ap-guangzhou',
}, function (err, data) {
console.log(data.Url);
});
},
},
}
</script>
当返回200时，就是成功啦。
大家使用vue框架时遇到了这个问题可以借鉴一下呢，希望能对大家有所帮助
网友评论