小程式子頁面向父頁面傳值、騰訊雲對象存儲上傳圖片

1. 頁面傳值

1.1 父頁面向子頁面傳值

父頁面：

/pages/xx/xxx?id=1

子頁面

// option就可以接收到父頁面傳來的值
onLoad:function(option){
	
}

1.2 子父頁面

子頁面

 var pages = getCurrentPages()
    var prevPage = pages[pages.length-2]
    // 得到的prevPage就是上一頁發佈也對象，像當於發佈頁的this
    // 可以通過setData直接修改主頁面的值，向主頁面傳值
    // prevPage.setData({
    //   topicText:topicInfo.title
    // })
    // 也可以調用主頁面的方法並將值傳過去，主頁面的該方法修改自己頁面的值
    prevPage.setTopicData(topicInfo)

註意：data-xx 可以給事件傳值。

騰訊雲對象存儲上傳圖片

小程式動態獲取用戶上傳圖片並展示

wxml

<view bindtap="getTopic">
  {{topicText}}
</view>
<view bindtap="uploadImage">請上傳圖片</view>
<view class="container">
  <image wx:for="{{imageDic}}" src="{{item.tempFilePath}}"></image>
</view>

<view bindtap="upload">
  點擊上傳圖片
</view>

js

 data: {
    topicText: "請選擇話題",
    topicID: null,
    imageDic:[],
  },
  uploadImage: function () {
    var that = this;
    wx.chooseMedia({
      count: 9, //圖片最多的個數
      sizeType: ['original', 'compressed'], // 圖片大小
      sourceType: ['album', 'camera'], //圖片的來源，相機或者本地
      success(res) {
        // 設置imageList，頁面上圖片自動修改。
        console.log(res)
        // that.setData({
        //   imageDic: res.tempFiles
        // });


        // 預設圖片 + 選擇的圖片； 
        that.setData({
          imageDic: that.data.imageDic.concat(res.tempFiles) //concat方法拼接兩個列表
        });
      }
    });
  },

將用戶上傳的圖片上傳到騰訊雲存儲

js

  upload() {
    var onlineImageList = []
    // SECRETID 和 SECRETKEY請登錄 https://console.cloud.tencent.com/cam/capi 進行查看和管理
    // var cos = new COS({
    //   SecretId: 'AKIDnZCfy76YqxufGgv1znVNBuTs68BFWo4I',
    //   SecretKey: 'GUgr5Mg1O4mZN9rV6d7YuCOhzGTtGaq2',
    //   SimpleUploadMethod: 'putObject', // 強烈建議，高級上傳、批量上傳內部對小文件做簡單上傳時使用putObject,sdk版本至少需要v1.3.0
    // });

    // 上述的方式是把SecretId和SecretKey都放在了前端，這會不太安全，我們應當採用生成一個臨時密鑰來給前端
    var cos = new COS({
      SimpleUploadMethod: 'putObject', // 強烈建議，高級上傳、批量上傳內部對小文件做簡單上傳時使用putObject,sdk版本至少需要v1.3.0
      // 必選參數
      getAuthorization: function (options, callback) {
        // 服務端 JS 和 PHP 示例：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
        // 服務端其他語言參考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk
        // STS 詳細文檔指引看：https://cloud.tencent.com/document/product/436/14048
        wx.request({
          url: 'http://127.0.0.1:8000/api/credential/',
          data: {
            // 可從 options 取需要的參數
          },
          success: function (result) {
            var data = result.data;
            var credentials = data && data.credentials;
            if (!data || !credentials) return console.error('credentials invalid');
            callback({
              TmpSecretId: credentials.tmpSecretId,
              TmpSecretKey: credentials.tmpSecretKey,
              // v1.2.0之前版本的sdk使用XCosSecurityToken而不是SecurityToken
              SecurityToken: credentials.sessionToken,
              // 建議返回伺服器時間作為簽名的開始時間，避免用戶瀏覽器本地時間偏差過大導致簽名錯誤
              StartTime: data.startTime, // 時間戳，單位秒，如：1580000000
              ExpiredTime: data.expiredTime, // 時間戳，單位秒，如：1580000900
            });
          }
        });
      }
    });
    // for迴圈語法
    for (var index in this.data.imageDic) {
      var filePath = this.data.imageDic[index].tempFilePath
      cos.uploadFile({
        Bucket: 'xiaochengxu-1314764189',
        /* 填寫自己的bucket，必須欄位 */
        Region: 'ap-nanjing',
        /* 存儲桶所在地域，必須欄位 */
        Key: index + 'uuu.jpg',
        /* 存儲在桶里的對象鍵（例如:1.jpg，a/b/test.txt，圖片.jpg）支持中文，必須欄位 */
        FilePath: filePath,
        /* 上傳文件路徑，必須欄位 */
        SliceSize: 1024 * 1024 * 5,
        /* 觸發分塊上傳的閾值，超過5MB使用分塊上傳，小於5MB使用簡單上傳。可自行設置，非必須 */
        onProgress: function (progressData) {
          console.log(JSON.stringify(progressData));
        }
      }, function (err, data) {
        if (err) {
          console.log('上傳失敗', err);
        } else {
          // 成功之後，把上傳圖片的地址保存到列表中，方便後續存到資料庫中
          onlineImageList.push(data.Location)
          console.log('上傳成功', data);
        }
      });
    }
  },