- 分片上传视频到oss服务器
npm install ali-oss --save
- 话不多说上代码
<template>
<div class="app-container">
<el-row>
<el-col :span='5' :offset='10'>
<el-upload ref="upload" drag action="" accept='video/*' :limit='1' :auto-upload="false" :on-change="handleChange" :http-request="handleVideoUpload" :on-remove="handleRemove">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
<el-progress :percentage="percentage" :status="uploadStatus" v-if='percentage>0 && percentage<=100'></el-progress>
</el-col>
<el-col :span='5' :offset='4'>
<video :src="videoURL" v-if='videoURL' style="width:100%;height:100%" controls></video>
</el-col>
</el-row>
</div>
</template>
<script>
// 引入ali-oss插件
let OSS = require('ali-oss')
const client = new OSS({
//根据那你的Bucket地点来填写，例如：oss-cn-beijing
region: 'oss-cn-xxxx',
// 自己账户的accessKeyId
accessKeyId: 'xxxxxxxxxxxxxxxxxxxx',
//自己账户的accessKeySecret
accessKeySecret: 'xxxxxxxxxxxxxxxxxxxx',
// bucket名字 桶名称
bucket: 'xxx-xxx',
})
export default {
data() {
return {
// 需要上传的文件
currFile: null,
// checkpoint参数用于记录上传进度，断点续传上传时将记录的checkpoint参数传入即可。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
tempCheckpoint: null,
// 进度条上传状态 el-progress
uploadStatus: null,
// 进度条百分比
percentage: 0,
//Object所在Bucket的完整路径
uploadName: '',
//上传uploadId
uploadId: '',
// 视频预览地址
videoURL: '',
}
},
methods: {
/**
* @description: 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 function(file, fileList) 1.当文件上传的时候调用oss上传视频的方法
* @param {*}
* @return {*}
*/
handleChange(file, fileList) {
// 文件状态改变时，调用视频分片上传的方法
this.currFile = file
this.multipartUpload(file)
},
/**
* @description: 文件列表移除文件时的钩子 function(file, fileList) 1.删除文件的时候对视频上传进行停止 ,进行数据的重置
* @param {*}
* @return {*}
*/
handleRemove(file, fileList) {
this.percentage = 0
this.uploadStatus = null
this.videoURL = ''
},
/**
* @description: 自定义的视频上传方法
* @param {*}
* @return {*}
*/
handleVideoUpload() {},
/**
* @description: 自定义视频上传的方法 分片上传
* @param {*}
* @return {*}
*/
async multipartUpload(file) {
try {
// 填写Object完整路径。Object完整路径中不能包含Bucket名称。
// 您可以通过自定义文件名（例如exampleobject.txt）或目录（例如exampledir/exampleobject.txt）的形式，实现将文件上传到当前Bucket或Bucket中的指定目录。
// file.name 文件名 videos/${file.name} 代表 上传到oss服务器上 videos文件夹下面
// file.raw 文件流
// progress 视频上传进度函数
const result = await client.multipartUpload(`videos/${file.name}`, file.raw, {
progress: (p, checkpoint) => {
// checkpoint参数用于记录上传进度，断点续传上传时将记录的checkpoint参数传入即可。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
this.tempCheckpoint = checkpoint
// 取消或者停止所需的参数
this.uploadId = checkpoint.uploadId
this.uploadName = checkpoint.uploadName
// 上传进度，由于p 是多位小数，所以保留一位小数
this.percentage = parseFloat((p * 100).toFixed(1))
},
// 设置分片大小。默认值为1 MB，最小值为100 KB。我设置的是10M一个分片
partSize: 1024 * 1024 * 10,
meta: { year: Date.now(), time: Date.now() }, //这个地方可以添加一些我们的参数
//自定义配置请求头
headers: {
'Content-Disposition': 'inline',
'Content-Type': file.raw.type,
},
mime: file.raw.type,
})
const { res } = result
if (res.statusCode === 200) {
this.videoURL = res.requestUrls[0].split('?')[0]
}
} catch (e) {
// 该监听放在断网的异常处理
window.addEventListener('online', this.resumeUpload)
// 捕获超时异常。
if (e.code === 'ConnectionTimeoutError') {
this.uploadStatus = 'exception'
}
}
},
/**
* @description: 取消上传 关闭页面或者点击按钮手动取消上传
* @param {*}
* @return {*}
*/
async abortMultipartUpload() {
// 移除监听事件
window.removeEventListener('online', this.resumeUpload)
const name = this.uploadName // Object所在Bucket的完整路径。
const uploadId = this.uploadId // 分片上传uploadId。
await client.abortMultipartUpload(name, uploadId)
// 取消之后 ，重置数据
this.videoURL = ''
this.percentage = 0
this.uploadStatus = null
},
/**
* @description: 恢复上传
* @param {*}
* @return {*}
*/
async resumeUpload() {
window.removeEventListener('online', this.resumeUpload)
if (!this.tempCheckpoint) {
return this.$message.error('请先上传')
}
this.uploadStatus = null
// 重新调用分片上传
this.multipartUpload(this.file)
},
},
}
</script>
-
预览图片