微信小程序-腾讯云Cos上传文件

        之前有做过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);

  },

    谢谢大家!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 做学问如作战,须攻坚挫锐,占住要塞。 一篇读下来,真感觉自己被打通了任督二脉,关于读书,自己真的是初学水平,完全按...
    飞鸟逐溪阅读 628评论 0 2
  • 前几天捣鼓了一下分割线,今天来看看RecyclerView的交互吧,RecyclerView的交互离不开ItemT...
    Archer_Coder阅读 540评论 0 1
  • 生命陪伴心语系统: (当下)此刻就是支持我成长的最大机会 (过程)我看见了我的情绪和想法,这不过是情绪和想法而已,...
    阳光中的晨薇阅读 176评论 0 0
  • 有逻辑是一项很重要的技能 有一天正赶上保研生的面试,在面试结束之后,跟老师做实验的时候,老师突然问我,对保研生有什...
    有聊星人_几人归阅读 155评论 0 0