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("上传成功!");
        });
    },
相关推荐
cloud studio AI应用3 小时前
腾讯云 AI 代码助手:产品研发过程的思考和方法论
人工智能·云计算·腾讯云
小曲曲8 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
为什么每天的风都这么大14 小时前
Vscode/Code-server无网环境安装通义灵码
ide·vscode·阿里云·编辑器·ai编程·code-server
何遇mirror17 小时前
云原生基础-云计算概览
后端·云原生·云计算
007php00717 小时前
GoZero 上传文件File到阿里云 OSS 报错及优化方案
服务器·开发语言·数据库·python·阿里云·架构·golang
嚯——哈哈19 小时前
轻量云服务器:入门级云计算的最佳选择
运维·服务器·云计算
请你喝好果汁64119 小时前
Kingfisher 下载ENA、NCBI SRA、AWS 和 Google Cloud)序列数据和元数据
云计算·aws
九陌斋19 小时前
如何使用AWS Lambda构建一个云端工具(超详细)
云计算·aws
嚯——哈哈19 小时前
AWS云服务器:开启高效计算的新纪元
服务器·云计算·aws
徒步僧19 小时前
ThingsBoard规则链节点:AWS SNS 节点详解
云计算·aws