最近在做网页的时候,遇到一个上传图片的功能,经商量后,打算直接上传到腾讯云对象存储上并获得储存地址来返回给后端。因为用的是vue框架,所以在这个过程中遇到一些问题,把它记录下来,希望对大家有所帮助。
1,SDK 获取
对象存储服务的 XML JS SDK 资源 github 地址:tencentyun/cos-js-sdk-v5。
然后下载在index.html中引入:
下面是我的index.html文件
接下来在需要用到上传文件的组件结构中加上input,type为file,添加一个change事件,通过$event来把input中的传到shangchuan这个方法中
然后是该组件的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);
});
},
},
}
当返回200时,就是成功啦。
大家使用vue框架时遇到了这个问题可以借鉴一下呢,希望能对大家有所帮助