小程序使用sdk对接cos存储桶

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

操作步骤

下载cos sdk

安装

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

小程序域名白名单配置

微信公众平台,选择开发 > 开发设置 > 服务器域名
配置地址: examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com

request合法域名、uploadFile合法域名

配置地址可以找后端或者cos上传成功会返回数据中有接口地址

初始化

javascript 复制代码
const COS = require('../../lib/cos-wx-sdk-v5.min.js')

/** 上传临时素材到cos */
uploadMaterialCos (tempFiles) {
  this.setData({
    isShowModal: false
  })
  console.log("tempFiles", tempFiles)
  const _this = this
  const { cosConfig } = _this.data
  wx.showLoading({
    title: '上传中...',
    mask: true
  })
  // 创建存储通对象
  var cos = new COS({
    SecretId: cosConfig.secretId, // 获取的密钥id
    SecretKey: cosConfig.secretKey // 获取的密钥key
  })
  tempFiles.forEach(item => {
    cos.uploadFile({
      Bucket: cosConfig.bucket, /* 必须 */
      Region: cosConfig.region, /* 存储桶所在地域,必须字段 */
      Key: item.key, /* 必须 */
      FilePath: item.path, /* 必须 */
      FileSize: item.size, /* v1.4.3之前的版本必须,v1.4.3及以后的版本非必须 */
      onProgress: function (progressData) { /* 非必须 */
        console.log(JSON.stringify(progressData))
      },
      onFileFinish: function (err, data, options) { /* 非必须 */
        console.log(options.Key + '上传' + (err ? '失败' : '完成'), data)
        _this.uploadMaterial(data, item)
      }
    }, function (err, data) {
      console.log('err', err || data)
      _this.setData({
        isShowModal: false
      })
    })
  })
},

配置信息获取通过后端api

javascript 复制代码
handleCosCredential () {
  cosCredentialApi({}).then(res => {
    const { code, data } = res
    if (code === 200) {
      this.setData({
        cosConfig: data
      })
    } else {
      wx.showToast(res.message)
    }
  }).catch(err => {
    wx.showToast(err.message)
  })
},

cos参数

上传成功

图片

视频

视频太大,分段上传,取值地址在最外面

相关推荐
互联科技报2 小时前
2026小程序店铺装修模板怎么选?小程序店铺装修教程是什么?
小程序
凡科网小帆2 小时前
右以云小程序:零基础企业的高性价比数字化落地实录
小程序
棋宣3 小时前
微信小程序onShareAppMessage 分享-生命周期函数 在vue3中 组合式函数 hooks中不生效
微信小程序·小程序
2601_957966533 小时前
抽卡机盲盒小程序怎么做?完整功能搭建与开发要点
小程序
wuyoula1 天前
全新多平台电商代付商城源码
开发语言·c++·ui·小程序·php源码
低代码布道师1 天前
微搭低代码MBA 培训管理系统实战 36——小程序端课程预约功能实现
低代码·小程序
万岳科技系统开发1 天前
小程序直播架构调整指南:H5嵌套模式的优化与替代方案
小程序·架构
Greg_Zhong1 天前
学习AI 工程师第 3 天:小程序中调用豆包模型,实现ai助手(打字机效果与流式输出)
小程序·ai工程师·小程序调用豆包实现ai助手
于先生吖1 天前
家政派单小程序定制厂家
大数据·小程序
00后程序员张1 天前
完整指南 iOS App上架到App Store的步骤详解
macos·ios·小程序·uni-app·objective-c·cocoa·iphone