WeCOS-UGC-DEMO——微信小程序用户资源上传COS示例

WeCOS-UGC-DEMO展示了微信小程序中有用户上传资源的场景时，如何结合COS（腾讯云对象存储服务）API将资源直接上传至COS

由于 JSON API 接口只支持 20MB 文件，该 demo 不推荐，建议使用 XML API 的小程序 SDK：https://github.com/tencentyun/cos-wx-sdk-v5

准备工作

• 进入腾讯云官网，注册帐号
• 登录云对象存储服务（COS）控制台，开通COS服务，创建资源需要上传的Bucket
• 当前 demo 是基于 V4 接口，请确认你使用的 COS Bucket 是V4，如何确定自己应该是用v4的sdk还是v3的？ 登陆https://console.qcloud.com/cos 如果左上角提示是云对象存储v4则说明要用v4的sdk否则就是v3的。
• 对 Bucket 设置好跨域配置
• COS鉴权服务器部署及URL地址（用于调用COSAPI时的鉴权），此处直接用我们鉴权服务端示例COS-AUTH，后文也会提到

源码简介

README.md
app
├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxss
│   │   └── index.wxml
└── utils
    ├── upload.js
    └── util.js

app目录是小程序目录，如果你没有创建小程序项目，我们可以直接下载本项目的demo，或者通过小程序开发工具创建，具体如何注册和创建请查看小程序入门指引

`app.js` 是小程序入口文件
`app.json` 是小程序的微信配置，其中指定了本示例的用户资源上传页面`index`
`pages目录` 内包含各个页面的入口和配置，业务逻辑，如index目录则为`index`页面

其中重要的文件如下：

utils/upload.js 上传cos的核心代码

pages/index/index.js 实现用户资源上传的示例

核心代码

//upload.js

/**
 * 把以下字段替换成自己的cos相关信息，详情可看API文档 https://www.qcloud.com/document/product/436/6066
 * REGION: cos上传的地区
 * APPID: 账号的appid
 * BUCKET_NAME: cos bucket的名字
 * DIR_NAME: 上传的文件目录
 * cosSignatureUrl：填写自己的鉴权服务器地址，查看前面的[准备工作]
 */
var cosUrl = "https://" + REGION + ".file.myqcloud.com/files/v2/" + APPID + "/" + BUCKET_NAME + DIR_NAME

/**
 * 上传方法
 * filePath: 上传的文件路径
 * fileName： 上传到cos后的文件名
 */
function upload(filePath, fileName) {
    // 鉴权获取签名
    wx.request({
        url: cosSignatureUrl,
        success: function(cosRes) {
            // 头部带上签名，上传文件至COS
            wx.uploadFile({
                url: cosUrl + '/' + fileName,
                filePath: filePath,
                header: { 'Authorization': cosRes.data },
                name: 'filecontent',
                formData: { op: 'upload' },
                success: function(uploadRes){ //do something }
            })
        }
    })
}

示例

如小程序项目目录为app

1、在app/pages/index/index.js中粘贴本示例中的代码

//index.js

// upload的核心代码
var uploadFn = require('../../utils/upload.js')

//获取应用实例
var app = getApp()
Page({
    //上传按钮事件处理函数
    uploadToCos: function() {
    
        // 选择上传的图片
        wx.chooseImage({
            success: function(res) {

                // 获取文件路径
                var filePath = res.tempFilePaths[0];

                // 获取文件名
                var fileName = filePath.match(/(wxfile:\/\/)(.+)/)
                fileName = fileName[2]

                // 文件上传cos，参考上面的核心代码
                uploadFn(filePath, fileName)
            }
        })
    }
})

2、参考本示例，在app/pages/index/index.wxml中把js中对应的事件绑定到dom

<!--index.wxml-->
<view class="container">
  <!-- ... -->
    <button type="primary" bindtap="uploadToCos" class="user-button"> 一键上传 </button>
  <!-- ... -->
</view>

配置相关

APPID可以在COS控制台拿到

COS鉴权相关

鉴权有两种方式：

1.前端鉴权，前端生成算法会暴露私钥。（不推荐）

2.服务端鉴权，安全性高，本示例采用该种方式。（推荐）

• 调用COSAPI需要鉴权，用于获取签名，如果需要了解具体的鉴权算法，可查看此处
• 鉴权生成签名的算法需要用到SecretId、SecretKey，可在COS控制台查看
• 鉴权服务器需要你自己部署且提供URL地址，基于这种鉴权需求，我们提供了鉴权服务端示例COS-AUTH
• 签名有分单次有效签名和多次有效签名，单次有效签名必须传文件路径，多次有效签名一定不要传文件路径，可查看此处

相关

• WeCOS——小程序COS瘦身方案，解决官方1MB限制的烦恼

• COS-AUTH——COS鉴权服务器DEMO