设为首页 加入收藏

TOP

小程序子页面向父页面传值、腾讯云对象存储上传图片(一)
2023-07-25 21:29:36 】 浏览:143
Tags:程序子 向父页 云对象 储上传

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.stringi
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇【验证码逆向专栏】某验三代滑块.. 下一篇小程序用户和登录页面展示

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目