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

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);
});

相关文档

web端上传(操作)文件

第一种方法

第二种方法