之前有做过iOS的Cos上传文件,小程序的是第一次做.在网上找了好多资料素材.JS的有很多可以参考,但是关于小程序这边比较少.正好我也做完了,就拿出来分享一下.
腾讯自己在github上有关于小程序Cos的使用说明.
附上链接:https://github.com/tencentyun/cos-wx-sdk-v5.
具体的实现方法很简单,首先要去上面链接里下载项目,从demo/lib中找到cos-wx-sdk-v5.js,拖入自己的项目中.如果之前没有用过cos服务的,要去腾讯云的官方注册,创建并且获取一些值.这些上面链接里写的很清楚,按步骤做就好了.
前期准备都做好了之后,就是写代码了.下面是github上腾讯官方的代码:
小程序cos上传
下面的方法适合调试使用(将SecretId和SecretKey写本地),大家可以参考,代码如下:
// 腾讯云上传操作
// 开始上传
startUploadFile: function (mediaType, filePath, callback) {
wx.showLoading({
title: '上传中...',
})
var Bucket = '你自己创建的Bucket';
var Region = '你自己的Region';
console.log(Bucket, Region);
var that = this;
var cos = new COS({
getAuthorization: function (options, callback) {
// 调试方式
var authorization = COS.getAuthorization({
SecretId: '你自己的SecretId',
SecretKey: '你自己的SecretKey',
Method: options.Method,
Key: options.Key
});
callback(authorization);
}
});
// 生成上传文件名
var Key = filePath.substr(filePath.lastIndexOf('/') + 1); // 这里指定上传的文件名
var dateObj = new Date();
var timestamp = dateObj.getTime();
var nowDate = dateObj.toLocaleDateString();
var formatDate = nowDate.replace(/\//g,"-"); // 格式斜杠日期
console.log(formatDate);
var filename = formatDate + '/' + timestamp+Key;
// 上传方法
cos.postObject({
Bucket: Bucket,
Region: Region,
Key: filename,
FilePath: filePath,
onProgress: function (info) {
}
}, function (err, data) {
wx.hideLoading();
console.log('err'+err);
console.log(JSON.stringify(data));
if (err) {
callback(false); // 上传失败的callback
}
if (data) {
callback(true, mediaData); // 上传成功的callback
}
});
},
真正项目中的上传方法,区别在authorization的创建方法(使用临时签名).代码如下:
var getAuthorization = function (options, callback) {
// 后端通过获取临时密钥给到前端，前端计算签名
that.fetchCosTempKeyInfo((isSuccess,data)=>{
if (isSuccess) {
if (data) {
callback({
TmpSecretId: data.tmpSecretId,
TmpSecretKey: data.tmpSecretKey,
XCosSecurityToken: data.sessionToken,
ExpiredTime: data.expiredTime,
});
} else {
wx.hideLoading();
app.showToast('获取上传信息失败!');
return;
}
} else {
wx.hideLoading();
app.showToast('获取上传信息失败!');
return;
}
})
}
var cos = new COS({
getAuthorization: getAuthorization,
});
// 获取临时签名信息
fetchCosTempKeyInfo:function(callback) {
var that = this;
//发起网络请求获取临时签名信息
//如果获取成功
callback(true,result.data);
// 如果失败
callback(false, error);
},
谢谢大家!
网友评论