小程序上传图片到腾讯云

场景：因为业务需要采用的是前端自己生成签名来上传图片(私认为，还是采用官方的方式上传图片最佳)

1、config.js 配置 (这个文件用来装自己的存储桶，地域，密钥信息即可)

var config = {
      Bucket:'存储桶的名字',
      Region:'地域名字',
      SecretId:'密钥id值'，
      SecretKey:'密钥key值'
}
module.exports = config

2、实现上传功能( 这里的代码是哪个地方需要上传图片，就写到哪个界面中即可 )

var COS = require('../../utils/cos-wx-sdk-v5');// 这个是cos上传的sdk
var config = require('../../utils/config');//这两个文件我是放在utils里面的 , 这个config文件 就是步骤一中的内容
var cos = new COS({
      getAuthorization:function(params,callback){
          var authorization = COS.getAuthorization({
                SecretId:config.SecretId,
                SecretKey:config.SecretKey,
                Method:params.Method,
                Key:params,Key
          });
          callback(authorization);
      }
})
page({
   //上传用户头像
   uploadHeadImage:function(){
      let that = this;
      wx.chooseImage({
         count:1,
         sizeType:['original','compressed'],
         sourceType:['album','camera'],
         success:function(res){
            var filePath = res.tempFilePaths[0];//获取文件路径
            var Key = filePath.substr(filePath.lastIndexOf('/')+1);//这里指定上传的文件名
            var dateObj = new Date();
            var timestamp = dataObj.getTime();
            var nowDate = dateObj.toLocaleDateString();
            var formatDate = nowDate.replace(/\//g,'-');//格式斜杠日期
            var newKey = formatDate +'/'+timestamp+Key;//cos上定义目录
            var tempObj = {};
            tempObj.imgLocation = 'https://' + config.Bucket +'.cos.' + config.Region + '.myqcloud.com/'+newKey;//返回上传的绝对 URL
            //SDK 提供的cos上传函数，如果想批量上传，可以在这里加上for循环。
            cos.postObject({
                Bucket:config.Bucket,//存储桶名称
                Region:config.Region,//地域名字
                Key:newKey,
                FilePath:filePath,//本地文件临时地址
            },function(err,data){
                if(err){
                   wx.showModal({
                      title:'返回错误',
                      content:'请求失败'+err,
                      showCancel:false
                   })
                }else{
                   if(data){
                      //data.headers.Location  这里是返回的图片URL，这里可以为界面中需要显示的图片src赋值
                      that.setData({
                          headImage:data.headers.Location
                      })
                   }
                }
            })
         }
      })
   }
})

3、重点来了

//上面的代码可以使用了，但是，但是，但是，小程序的域名配置一定不要忘记 配置请求cos这个接口的域名。
//比如说： 我们的存储桶名字是   upload-headimg-123456
//那么小程序的域名配置就是这样子的   https://upload-headimg-123456.cos.ap.chengdu.myqcloud.com/    (因为是地域是成都的，所以是 ap-chengdu ) 
//还有就是，如果上传的存储桶有多个，那么，小程序的域名配置就要配置多个。
//所以，这就是劣势。
//如果想要前端来上传图片到腾讯云，密钥放在前端，后端不做任何参与的话，这是最快的方式。但这也是最值得不推荐的方式!!!

4、忘记了一点(就是关于小程序上传图片，讲道理的话 wx.chooseImage({}) 应该和 wx.uploadFile({}) 一起使用的呢，代码如下)

//比如点击图片触发 wx.chooseImage({})
wx.chooseImage({
   count:1,
   sizeType:['original','compressed'],
   sourceType:['album','camera'],
   success:function(res){
      let tempFilePath = res.tempFiilePaths[0];//比如说这里获取到了上传文件的临时地址
      //讲道理的话，如果想要把图片上传到自己服务器哈
      wx.uploadFile({
         url:'自己服务器的图片上传地址',
         filePath:tempFilePath,//文件的临时地址
         name:'uploadFile',
         success:function(res){
            //上传成功后，自己服务器地址会返回一个图片值，然后就可以操作了耶，do something。
         }
      })
   }
})

参考链接: https://my.oschina.net/u/2456768/blog/1811775

参考链接: https://blog.csdn.net/weixin_34043301/article/details/88993437

参考链接：https://github.com/tencentyun/cos-wx-sdk-v5/tree/master/demo/lib （获取 cos-wx-sdk-v5.js 还有demo喔）

官网小程序直传实践demo链接: https://cloud.tencent.com/document/product/436/34929 (强烈安利这种上传图片的方式耶)