vue2前端阿里云oss断点续传

官方文档地址：如何通过断点续传上传的方式将文件上传到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.mp4const 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("上传成功！");});},