<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>OSS直传</title>
</head>
<body>
  <button id="submit">上传</button>
  <input id="file" type="file" />
  <!-- 导入sdk文件 -->
  <script type="text/javascript" src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.16.0.min.js"></script>
  <script type="text/javascript">
    const client = new OSS({
      region: "oss-cn-shenzhen", //Bucket所在地域
      accessKeyId: "<AccessKeyId>", //从STS服务获取的临时访问AccessKeyId
      accessKeySecret: "<AccessKeySecret>", //从STS服务获取的临时访问AccessKeySecret
      stsToken: "<SecurityToken>",//从STS服务获取的安全令牌（SecurityToken
      bucket: "<bucket>",//bucket名称
    });
    let checkPoint;
    // 指定上传到<bucket>的Object名称
    const name = "<dir>/temp.jpg";//目录名称/文件名，如：test/test.jpg
    // 获取DOM。
    const submit = document.getElementById("submit");
    // 监听按钮。
    submit.addEventListener("click", async () => {
      try {
        const data = document.getElementById("file").files[0];
        // 分片上传。
        const res = await client.multipartUpload(name, data, {
          //显示进度
          progress: function (p, checkpoint) {
            console.log(p);//进度信息,可以根据此数据生成div进度条
            checkPoint = checkpoint;
          },
          checkpoint: checkPoint,
          meta: { year: 2022, people: 'test' },
          mime: 'image/jpeg' //根据上传的文件类型修改
        });
      } catch (err) {
        console.log(err);
      }
    });
  </script>
</body>

</html>