实现视频分片上传 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.dataclient = 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) returnif (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 封装的操作,视频上传仅为使用实例。