微信小程序使用腾讯云对象储存上传图片

2022-08-04 10:56:32 浏览数 (1)

对象存储(Cloud Object Storage,COS)控制台提供存储数据概览页面,您可以在该页面中查看存储桶数量、对象数量、存储用量、请求数以及流量等数据。

代码语言:javascript复制
官方文档:
https://cloud.tencent.com/document/product/436/31953
手动安装

复制源码文件中的 cos-wx-sdk-v5.js到自己小程序代码根目录下任意路径,并用相对路径引用:

代码语言:javascript复制
var COS = require('./utils/cos-wx-sdk-v5.js')

其中,程序代码使用var COS = require('cos-wx-sdk-v5');进行引用。

开始使用

小程序域名白名单配置

小程序里请求 COS 需要登录到 微信公众平台,选择开发 > 开发设置 > 服务器域名,配置域名白名单。SDK 使用到了两个接口:

  1. cos.postObject 使用 wx.uploadFile 方法。
  2. 其他方法使用 wx.request 方法。

需要在对应白名单里,配置 COS 域名,白名单域名格式有两种:

  1. 如果是标准请求,可以配置存储桶域名作为白名单域名,例如: examplebucket-1250000000.cos.ap-guangzhou.myzijiebao.com
  2. 如果小程序使用的存储桶多,可以选择后缀式请求 COS,只需要在 SDK 实例化时传入ForcePathStyle: true,这种方式需要配置地域域名作为白名单,例如:cos.ap-guangzhou.myzijiebao.com

初始化

代码语言:javascript复制
var COS = require('./utils/cos-wx-sdk-v5.js')
  • 格式四(不推荐):前端使用固定密钥计算签名,该格式适用于前端调试,若使用此格式,请避免泄露密钥。
代码语言:javascript复制
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
    SecretId: 'SECRETID',
    SecretKey: 'SECRETKEY',
});
代码语言:javascript复制
<view class="container">
  <view bindtap="uploadImg">上传图片</view>
  <image wx:for="{{imgList}}" wx:key="item" src="{{item}}" class="imgList"></image>
  <view bindtap="uploadIng">上传</view></view>
代码语言:javascript复制
// 获取应用实例
var COS = require('../../utils/cos-wx-sdk-v5.js')

Page({
  data: {
    imgList: []
  },
  uploadImg: function () {
    var that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original'],
      sourceType: ['album', 'album'],
      success: (result) => {
        that.setData({
          imgList: result.tempFilePaths
        })
      },

    })
  },
  uploadIng: function () {
    var cos = new COS({
      SecretId: 'SECRETID',
      SecretKey: 'SECRETKEY',
    });
    for (var index in this.data.imgList) {
      var filePath = this.data.imgList[index];
      cos.postObject({
        Bucket: 'my-125184146',//对象储存桶的名称
        Region: 'ap-shanghai',//所属地域
        Key: index,
        FilePath: filePath,
        onProgress: function (info) {
          console.log('进度条', JSON.stringify(info));
        }
      }, function (err, data) {
        console.log(data);
      });
    }
  }
  
})

0 人点赞