官方文档地址:如何通过断点续传上传的方式将文件上传到OSS_对象存储(OSS)-阿里云帮助中心
1、需要后端提供一个接口,接口数据包含:
const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。
region: 'yourRegion',
// 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// 从STS服务获取的安全令牌(SecurityToken)。
stsToken: 'yourSecurityToken',
// 填写Bucket名称,例如examplebucket。
bucket: "examplebucket",
});
2、具体实现
2-1:下载ali-oss
npm i ali-oss
2-2:引入并使用
<el-form-item label="课程" prop="chapterUrl">
<div v-if="!uploadVideoFlag">
<el-button size="small" class="upload-btn" icon="el-icon-loading">
上传中
</el-button>
</div>
<div v-if="uploadVideoFlag">
<el-upload
:http-request="uploadVideo"
action="#"
:limit="1"
:file-list="fileVideoList"
accept=".mp4"
>
<el-button size="small" type="primary" class="upload-btn">
上传视频
</el-button>
<div slot="tip" class="el-upload__tip">只能上传 MP4 文件</div>
</el-upload>
</div>
<el-progress :percentage="percentage" v-if="progressFlag"></el-progress>
</el-form-item>
let OSS = require("ali-oss");
uploadVideo(file) {
this.uploadVideoFlag = false;
this.fileVideo = file.file;
var video = this.fileVideo.name.substring(this.fileVideo.name.lastIndexOf(".") + 1);
const suffix = video === "mp4";
if (!suffix) {
this.uploadVideoFlag = true;
this.form.chapterUrl = undefined;
this.fileVideoList = [];
this.$message.warning("只能上传 MP4 文件!");
return;
}
this.uploadLiveRecordFlag = true;
this.progressFlag = true;
const client = new OSS({
region: this.ossBucket.region,
accessKeyId: this.ossBucket.accessKeyId,
accessKeySecret: this.ossBucket.accessKeySecret,
stsToken: this.ossBucket.securityToken,
bucket: this.ossBucket.bucketName,
});
// 上传至Bucket内Object的完整路径,例如exampledir/exampleobject.txt。
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, "0");
const day = String(today.getDate()).padStart(2, "0");
const formattedDate = `${year}${month}${day}`;
// 部门要求文件名称必须是:年月日/uuid.文件格式 eg:20240826/uuid.mp4
const name = formattedDate + "/" + this.getFileNameUUID() + "." + video;
// 定义中断点。
let abortCheckpoint;
client
.multipartUpload(name, this.fileVideo, {
progress: (p, cpt, res) => {
// 为中断点赋值
abortCheckpoint = cpt;
// 获取上传进度
let pNumber = p * 100;
// 过滤进度.之后的内容
this.percentage = Math.floor(Number(pNumber));
if (this.percentage == 100) {
this.uploadLiveRecordFlag = false;
}
},
})
.then((r) => {
this.uploadVideoFlag = true;
// 视频数组:
this.fileVideoList.length = 1;
// 视频地址:
this.form.chapterUrl = "http://桶名称.桶所在地域.aliyuncs.com/" + r.name;
this.$message.success("上传成功!");
});
},