小程序上傳圖片到騰訊雲

 場景：因為業務需要采用的是前端自己生成簽名來上傳圖片(私認為，還是采用官方的方式上傳圖片最佳)

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  (強烈安利這種上傳圖片的方式耶)