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

lyudev

发布于 2022-08-04 10:56:32

9.3K0

发布于 2022-08-04 10:56:32

文章被收录于专栏：代码即数据

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

官方文档：
https://cloud.tencent.com/document/product/436/31953

手动安装

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

var COS = require('./utils/cos-wx-sdk-v5.js')

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

开始使用

小程序域名白名单配置

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

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

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

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

初始化

var COS = require('./utils/cos-wx-sdk-v5.js')

格式四（不推荐）：前端使用固定密钥计算签名，该格式适用于前端调试，若使用此格式，请避免泄露密钥。

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
    SecretId: 'SECRETID',
    SecretKey: 'SECRETKEY',
});

<view class="container">
  <view bindtap="uploadImg">上传图片</view>
  <image wx:for="{{imgList}}" wx:key="item" src="{{item}}" class="imgList"></image>
  <view bindtap="uploadIng">上传</view></view>

// 获取应用实例
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);
      });
    }
  }
  
})