阿里云oss大文件切片上传

demo：

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

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>

  <input id="file" type="file" /><br>
  <button id="submit">上传</button><br>
  <button id="geturl">获取下载地址</button><br>

  <video id="video" src="" controls width="500" height="400"></video>

  <!-- 导入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({
      // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
      region: "oss-cn-hangzhou",
      // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
      accessKeyId: "---",
      accessKeySecret: "---",
      // 从STS服务获取的安全令牌（SecurityToken）。
      stsToken: "---",
      // 填写Bucket名称，例如examplebucket。
      bucket: "tavp",
    });

    //文件名
    const filepath = '/test/1.mp4'

    // 设置中断点。
    let abortCheckpoint

    // submit
    const submit = document.getElementById('submit');


    /**
     * filepath  文件存储路径
     * file 文件对象
     * progress  上传进度回调函数
    */
    async function uploadObject(filepath, file, progress) {
      let result = await client.multipartUpload(filepath, file, { progress });
      console.log(result.res.requestUrls)
    }

    //回调
    function handleProgress(p) {
      console.log((p * 100).toFixed(2));//上传进度
    }

    //上传
    submit.addEventListener('click', async () => {
      const file = document.getElementById("file").files[0];
      await uploadObject(filepath, file, handleProgress)
    })

    //获取下载地址
    geturl.onclick = async () => {
      const response = {
        expires: 3600,
      }
      // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
      const url = client.signatureUrl(filepath, { response });
      console.log(url);
      video.src = url
    }
  </script>
</body>

</html>

 

posted @ 2022-07-22 18:10  herry菌  阅读(334)  评论(0)  编辑  收藏  举报