实现视频分片上传 OSS

访问 OSS 有两种方式，本文用到的是使用临时访问凭证上传到 OSS，不同语言版本的代码参考：

使用STS临时访问凭证访问OSS_对象存储(OSS)-阿里云帮助中心

1.安装并使用

首先我们要安装 OSS：

npm install ali-oss --save

接着我们创建一个 oss.js 文件，编写如下代码：

const axios = require("axios");
const OSS = require("ali-oss");

export let client = null
export let object_name = ''

export const getToken = async (ext) => {
    const formData = {
        ext: ext,
        csrf_token: window.sessionStorage.getItem('csrf-token'),
    }

    const res = await axios.post('your-path', formData)
    const token = res.data.data

    client = new OSS({
        region: token.region,
        accessKeyId: token.AccessKeyId,
        accessKeySecret: token.AccessKeySecret,
        stsToken: token.SecurityToken,
        authorizationV4: true,
        bucket: token.bucket,
    })

    object_name = token.object_name
}

后端接口返回的参数结构如图：

接下来即可使用 OSS 的 client.multipartUpload 进行分片上传：

const uploadArt = () => {
  const inputFile = document.createElement('input');
  inputFile.type = 'file';
  inputFile.accept = 'video/*'
  inputFile.multiple = false // 是否可以批量上传

  inputFile.addEventListener('change', async (event) => {
    const files = event.target.files;
    if (!files || files.length === 0) return

    if (art_type.value === 'video') {
      const file = files[0]
      if (!file.name.endsWith('.mp4') && !file.name.endsWith('.mov')) {
        Modal.message({
          status: 'error',
          message: '请上传.mov或.mp4格式的视频！',
          duration: 3000
        })
        return
      }

      if (file.size > 300 * 1024 * 1024) {
        Modal.message({
          status: 'error',
          message: '视频不能大于300MB！',
          duration: 3000
        })
        return
      }

      const ext = file.name.split('.').pop()

      await getToken(ext)
      const res = await client.multipartUpload(object_name, file)
      if(res) {
        videoUrl.value = {
          url: window.sessionStorage.getItem("video_url"),
          object_name: window.sessionStorage.getItem("video_object_name")
        }

        const url = stripQueryParams(res.res.requestUrls[0])
        await autoUploadPoster(`${url}?x-oss-process=video/snapshot,t_0,f_jpg`) // 获取封面图并上传
      }
    }
  });
  inputFile.click();
}

上传之后拿到的视频 url 可以调用如下方法获取视频第一帧作为视频封面：

`${url}?x-oss-process=video/snapshot,t_0,f_jpg`

分片效果如图： 

上述代码是每次上传一个视频，如果想批量上传，可设置：

inputFile.multiple = true // 是否可以批量上传

并视频 for 循环遍历各个文件进行上传。可查看文档，参考上传的回调，获取上传进度等，本文主要讲述 OSS 封装的操作，视频上传仅为使用实例。