腾讯云cos对象存储使用方法

相关文档

零时密钥生成指引：https://cloud.tencent.com/document/product/436/14048

node.js SDK文档：https://cloud.tencent.com/document/product/436/8629

javascript SDK文档：https://cloud.tencent.com/document/product/436/7751

cos对象存储API文档：https://cloud.tencent.com/document/product/436/7751

前端web上传官方demo： https://github.com/tencentyun/cos-snippets/tree/master/JavaScript

web端上传(操作)文件

官方介绍的方式有4种，这里以第1种和第4种做简单说明。

第一种方法

这种方法需要通过web端请求服务端接口获取临时密钥，通过调用服务端接口获取临时密钥，用临时密钥new一个cos实例。用cos实例上的方法来上传或操作文件。

首先需要安装官方提供的SDK包 npm i cos-js-sdk-v5 --save

demo如下：

// 前端代码

import React from 'react'
import COS from 'cos-js-sdk-v5'
import config from '../../../../config/index.json'

// 用于发送请求
function ajax(method, url, data = null) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest()
    xhr.open(method, url, false)
    xhr.onload = () => {
      const result = JSON.parse(xhr.responseText)
      resolve(result)
    }
    xhr.send(data)
  })
}

// 生成cos实例
const cos = new COS({
  // 必选参数
  getAuthorization: async function (options, callback) {
    // 请求的URL替换为服务端提供的接口
    const data = await ajax('GET', 'http://127.0.0.1:8000/sts')
    console.log('临时密钥:', data)
    var credentials = data && data.credentials;
    if (!data || !credentials) return console.error('credentials invalid');
    callback({
      TmpSecretId: credentials.tmpSecretId,
      TmpSecretKey: credentials.tmpSecretKey,
      XCosSecurityToken: credentials.sessionToken,
      // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
      StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
      ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000900
    })
  }
})

function App() {
  const uploadCos = (file, filename) => {
    cos.putObject({
      Bucket: config.Bucket,     /* 必须 */
      Region: config.Region,     /* 存储桶所在地域，必须字段 */
      Key: filename,              /* 必须 */
      StorageClass: 'STANDARD',
      Body: file, // 上传文件对象
      onProgress: function (progressData) {
        console.log('progress', JSON.stringify(progressData));
      }
    }, function (err, data) {
      console.log('msg:', err || data);
    });
  }

  const uploadHandle = () => (
    new Promise(resolve => {
      const int = document.createElement('input')
      int.type = 'file'
      int.click()
      int.onchange = () => {
        const file = int.files[0]
        console.log('file:', file)
        resolve(file)
      }
    })
  )

  const onUpload = async () => {
    const file = await uploadHandle()
    uploadCos(file, file.name)
  }
  return <button onClick={onUpload}>点击上传</button>
}

export default App

nodejs服务端代码(生成临时密钥)

安装依赖包： npm i express cors qcloud-cos-sts --save

const app = require('express')()
const cors = require('cors')
const STS = require('qcloud-cos-sts') // 用于生成零时密钥

// 配置参数
const config = {
  secretId: configs.SecretId,   // 替换你的固定密钥
  secretKey: configs.SecretKey,  //替换你的固定密钥
  proxy: '',
  durationSeconds: 1800,  // 密钥有效期
  // 放行判断相关参数
  bucket: configs.Bucket, // 换成你的 bucket
  region: configs.Region, // 换成 bucket 所在地区
  allowPrefix: '*', // 这里改成允许的路径前缀，可以根据自己网站的用户登录态判断允许上传的具体路径，例子： a.jpg 或者 a/* 或者 * (使用通配符*存在重大安全风险, 请谨慎评估使用)
  allowActions: [
    // 所有 action 请看文档 https://cloud.tencent.com/document/product/436/31923
    // 简单上传
    'name/cos:PutObject',
    'name/cos:PostObject',
    // 分片上传
    'name/cos:InitiateMultipartUpload',
    'name/cos:ListMultipartUploads',
    'name/cos:ListParts',
    'name/cos:UploadPart',
    'name/cos:CompleteMultipartUpload'
  ],
};

// 处理跨域
app.use(cors())

// 生成临时密钥接口
app.get('/sts', (req, res) => {
  // 获取临时密钥
  var shortBucketName = config.bucket.substr(0, config.bucket.lastIndexOf('-'));
  var appId = config.bucket.substr(1 + config.bucket.lastIndexOf('-'));
  var policy = {
    'version': '2.0',
    'statement': [{
      'action': config.allowActions,
      'effect': 'allow',
      'principal': { 'qcs': ['*'] },
      'resource': [
        'qcs::cos:' + config.region + ':uid/' + appId + ':prefix//' + appId + '/' + shortBucketName + '/' + config.allowPrefix,
      ],
    }],
  };
  STS.getCredential({
    secretId: config.secretId,
    secretKey: config.secretKey,
    proxy: config.proxy,
    durationSeconds: config.durationSeconds,
    policy: policy,
  }, function (err, tempKeys) {
    var result = JSON.stringify(err || tempKeys) || '';
    res.send(result);
  });
})

app.listen(8000)
console.log(`server running at: http://localhost:8000`)

第二种方法

第二种方法使用比较简单，不需要依赖服务端生成临时密钥。由于密钥保存在前端不安全，仅用于测试时使用。

demo：

import COS from 'cos-js-sdk-v5'

 const cos = new COS({
  SecretId: config.SecretId, // 替换你的SecretId
  SecretKey: config.SecretKey, // 替换你的SecretKey
})

cos.putObject({
  Bucket: config.Bucket,     /* 必须  替换你的Bucket */
  Region: config.Region,     /* 存储桶所在地域，必须字段 替换你的Region */
  Key: filename,              /* 必须 */
  StorageClass: 'STANDARD',
  Body: file, // 上传文件对象
  onProgress: function (progressData) {
    console.log('progress', JSON.stringify(progressData));
  }
}, function (err, data) {
  console.log('msg:', err || data);
});