vue2前端阿里云oss断点续传

官方文档地址：如何通过断点续传上传的方式将文件上传到OSS_对象存储(OSS)-阿里云帮助中心

1、需要后端提供一个接口，接口数据包含：

javascript 复制代码

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

javascript 复制代码

npm i ali-oss

2-2：引入并使用

html 复制代码

<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>

javascript 复制代码

let OSS = require("ali-oss");

javascript 复制代码

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("上传成功！");
        });
    },