阿里云oss大文件切片上传
demo:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
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>
<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>