小程序前端怎么上传图片（小程序子页面向父页面传值、腾讯云对象存储上传图片）

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="https://www.cnblogs.com/suncolor/archive/2022/12/26/{{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); } }); } },