????????之前有做過iOS的Cos上傳文件,小程序的是第一次做.在網(wǎng)上找了好多資料素材.JS的有很多可以參考,但是關(guān)于小程序這邊比較少.正好我也做完了,就拿出來分享一下.
? ? ? ? 騰訊自己在github上有關(guān)于小程序Cos的使用說明.
????????附上鏈接:https://github.com/tencentyun/cos-wx-sdk-v5.
? ? ? ? 具體的實現(xiàn)方法很簡單,首先要去上面鏈接里下載項目,從demo/lib中找到cos-wx-sdk-v5.js,拖入自己的項目中.如果之前沒有用過cos服務(wù)的,要去騰訊云的官方注冊,創(chuàng)建并且獲取一些值.這些上面鏈接里寫的很清楚,按步驟做就好了.
? ? ? ? 前期準(zhǔn)備都做好了之后,就是寫代碼了.下面是github上騰訊官方的代碼:
下面的方法適合調(diào)試使用(將SecretId和SecretKey寫本地),大家可以參考,代碼如下:
// 騰訊云上傳操作
? // 開始上傳
? startUploadFile: function (mediaType, filePath, callback) {
? ? wx.showLoading({
? ? ? title: '上傳中...',
? ? })
? ? var Bucket = '你自己創(chuàng)建的Bucket';
? ? var Region = '你自己的Region';
? ? console.log(Bucket, Region);
? ? var that = this;
? ? var cos = new COS({
? ? ? getAuthorization: function (options, callback) {
? ? ? ? // 調(diào)試方式
? ? ? ? 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
? ? ? }
? ? });
? },
? 真正項目中的上傳方法,區(qū)別在authorization的創(chuàng)建方法(使用臨時簽名).代碼如下:
? ?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;
? ? //發(fā)起網(wǎng)絡(luò)請求獲取臨時簽名信息
????//如果獲取成功
????callback(true,result.data);
????// 如果失敗
????callback(false, error);
? },
? ? 謝謝大家!
