腾讯云 cos 文件上传之---web 端直传 #4

littleluckly · 2019-08-23T14:23:27Z

腾讯云 cos 文件上传之---web 端直传

开篇前的废话，本人作为前端菜鸟，刚开始对腾讯云文件上传一头雾水，甚至连文档都看不明白，途中一度想要放弃！在疯狂的百度，疯狂的翻阅文档下，历经艰辛最后形成了本文。

完整的参考地址： https://github.com/tencentyun/cos-js-sdk-v5/tree/master/dist

服务端代码参考地址： https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/sts.js

web 端代码参考地址： https://github.com/tencentyun/cos-js-sdk-v5/blob/master/demo/sts-post.html

临时密钥生成参考地址：https://cloud.tencent.com/document/product/436/14048

1.上传之前的准备工作

1.开通对象存储服务，并建立存储桶在存储桶列表中找到Bucket（即存储同名称）和Region（即所属地域）地址：https://console.cloud.tencent.com/cos5,
2.点击存储桶名称进入存储桶管理页，找到基础配置，在基础配置中添加跨域访问 cors 规则
3.开通 API 云密钥管理服务，获取 SecretId 和 SecretKey。地址：https://console.cloud.tencent.com/cam/capi
4.下载计算签名的库 (cos-auth.min.js)： https://github.com/tencentyun/cos-js-sdk-v5/blob/master/demo/common/cos-auth.min.js

2.编写 web 端代码

主要分成二个步骤：

计算签名，签名需要用到临时密钥 tmpSecretId，tmpSecretKey。临时密钥放到服务端生成。
采用表单上传的方式，将文件上传到腾讯云，上传的地址为：protocol + "//" + Bucket + ".cos." + Region + ".myqcloud.com/"

废话少讲，直接上代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ajax Post 上传</title>
    <style>
      h1,
      h2 {
        font-weight: normal;
      }

      #msg {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Ajax Post 上传</h1>

    <input id="fileSelector" type="file" />
    <input id="submitBtn" type="submit" />

    <div id="msg"></div>

    <script src="../plugins/jquery.js"></script>
    <script src="../plugins/cos-auth.js"></script>
    <script>
      ;(function() {
        // 请求用到的参数
        var Bucket = "wojushenzhen-1259597421"
        var Region = "ap-guangzhou"
        var protocol = location.protocol === "https:" ? "https:" : "http:"
        // 文件上传地址
        var prefix =
          protocol + "//" + Bucket + ".cos." + Region + ".myqcloud.com/"

        // 计算签名
        var getAuthorization = function(options, callback) {
          $.ajax({
            method: "post",
            url: "http://127.0.0.1:9528/upload/getCredential",
            success: function(res) {
              if (res) {
                var credentials = res.credentials
                callback(null, {
                  XCosSecurityToken: credentials.sessionToken,
                  Authorization: CosAuth({
                    SecretId: credentials.tmpSecretId,
                    SecretKey: credentials.tmpSecretKey,
                    Method: options.Method,
                    Pathname: options.Pathname
                  })
                })
              }
            },
            error: function(err) {
              callback("获取签名出错")
            }
          })
        }

        // 上传文件
        var uploadFile = function(file, callback) {
          // 设置Key值，用来指定要上传的文件名称和存储目录
          // 比如要把文件上传到test目录，那么首先应该在存储桶中建立新建test的文件夹
          // 同时在服务端生成临时密钥时，要把policy属性下的resource属性也设置成test
          var Key = "test/" + file.name
          getAuthorization({ Method: "POST", Pathname: "/" }, function(
            err,
            info
          ) {
            var fd = new FormData()
            fd.append("key", Key)
            fd.append("Signature", info.Authorization)
            fd.append("Content-Type", "")
            info.XCosSecurityToken &&
              fd.append("x-cos-security-token", info.XCosSecurityToken)
            fd.append("file", file)
            var xhrOnProgress = function(fun) {
              xhrOnProgress.onprogress = fun //绑定监听
              //使用闭包实现监听绑
              return function() {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr()
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== "function") return xhr
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                  xhr.upload.onprogress = xhrOnProgress.onprogress
                }
                return xhr
              }
            }
            // 对上传的文件名称编码，用来拼接上传后的文件资源路径
            var camSafeUrlEncode = function(str) {
              return encodeURIComponent(str)
                .replace(/!/g, "%21")
                .replace(/'/g, "%27")
                .replace(/\(/g, "%28")
                .replace(/\)/g, "%29")
                .replace(/\*/g, "%2A")
            }
            $.ajax({
              method: "post",
              url: prefix,
              data: fd,
              processData: false,
              contentType: false,
              xhr: xhrOnProgress(function(e) {
                var percent =
                  Math.round((e.loaded / e.total) * 10000) / 100 + "%"
                console.log("上传进度：", percent)
              }),
              success: function(res) {
                // 上传文件资源路径：prefix + camSafeUrlEncode(Key).replace(/%2F/g, "/")
                window.open(prefix + camSafeUrlEncode(Key).replace(/%2F/g, "/"))
              }
            })
          })
        }

        // 监听表单提交
        document.getElementById("submitBtn").onclick = function(e) {
          var file = document.getElementById("fileSelector").files[0]
          if (!file) {
            document.getElementById("msg").innerText = "未选择上传文件"
            return
          }
          file &&
            uploadFile(file, function(err, data) {
              console.log(err || data)
              document.getElementById("msg").innerText = err
                ? err
                : "上传成功，ETag=" + data.ETag
            })
        }
      })()
    </script>
  </body>
</html>

3.服务端的代码实现

服务端选用的是 node+express，相比较前端代码，服务端实现相对而言比较简单，只需要采用的是 COS STS SDK 生成临时密钥，发送给前端即可。本人当初卡在权限策略 policy 的配置上，policy 的 resource 即允许前端上传的路径，这个路径和前端上传时的 Key 相关联。

const express = require("express")
const router = express.Router()
// 利用qcloud-cos-sts获取临时密钥
const STS = require("qcloud-cos-sts")
// 获取临时密钥
// https://github.com/tencentyun/cos-js-sdk-v5
// https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/sts.js
router.post("/getCredential", function(req, res, next) {
  // 配置参数
  var config = {
    secretId: "AKIDinlaWMqEkssoZ9Av7M1a4QbawRejRiV7",
    secretKey: "ZjiT9VhpmX8SfhS1kKk2A8wfEONFxVs4",
    proxy: "",
    durationSeconds: 1800,
    bucket: "wojushenzhen-1259597421",
    region: "ap-guangzhou",
    // ！！这里allowPrefix要前端上传时的 Key相匹配，否则上传会报403权限错误，如果要上传到存储桶到根目录，设置为*
    allowPrefix: "test/*",
    // 密钥的权限列表
    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"
    ]
  }

  // 获取临时密钥
  var LongBucketName = config.bucket
  var ShortBucketName = LongBucketName.substr(0, LongBucketName.indexOf("-"))
  var AppId = LongBucketName.substr(LongBucketName.indexOf("-") + 1)
  var policy = {
    version: "2.0",
    statement: [
      {
        action: config.allowActions,
        effect: "allow",
        resource: [
          "qcs::cos:" +
            config.region +
            ":uid/" +
            AppId +
            ":prefix//" +
            AppId +
            "/" +
            ShortBucketName +
            "/" +
            config.allowPrefix
        ]
      }
    ]
  }
  //   获取临时签名 SecretId SecretKey
  var startTime = Math.round(Date.now() / 1000)
  STS.getCredential(
    {
      secretId: config.secretId,
      secretKey: config.secretKey,
      proxy: config.proxy,
      region: config.region,
      durationSeconds: config.durationSeconds,
      policy: policy
    },
    function(err, tempKeys) {
      if (tempKeys) tempKeys.startTime = startTime
      res.send(err || tempKeys)
    }
  )
})
module.exports = router

The text was updated successfully, but these errors were encountered:

MillionQW · 2023-08-22T12:52:55Z

你的secretId和secretKey暴露了

Cross1111 · 2023-10-28T01:58:17Z

是的，你secretid和secrekey暴露了，建议你删掉或者隐藏

littleluckly added documentation Improvements or additions to documentation 腾讯云 labels Aug 26, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

腾讯云 cos 文件上传之---web 端直传 #4

腾讯云 cos 文件上传之---web 端直传 #4

littleluckly commented Aug 23, 2019

MillionQW commented Aug 22, 2023

Cross1111 commented Oct 28, 2023

腾讯云 cos 文件上传之---web 端直传 #4

腾讯云 cos 文件上传之---web 端直传 #4

Comments

littleluckly commented Aug 23, 2019

腾讯云 cos 文件上传之---web 端直传

1.上传之前的准备工作

2.编写 web 端代码

3.服务端的代码实现

MillionQW commented Aug 22, 2023

Cross1111 commented Oct 28, 2023