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("上传成功!");
        });
    },
相关推荐
IT技术分享社区23 分钟前
C#实战:使用腾讯云识别服务轻松提取火车票信息
开发语言·c#·云计算·腾讯云·共识算法
九河云7 小时前
AWS账号注册费用详解:新用户是否需要付费?
服务器·云计算·aws
神一样的老师7 小时前
利用亚马逊AWS IoT核心和MQTT进行数据采集的综合指南
云计算·aws
昔我往昔13 小时前
阿里云文本内容安全处理
安全·阿里云·云计算
写代码的学渣16 小时前
Linux云计算个人学习总结(一)
linux·运维·云计算
NETFARMER运营坛17 小时前
如何优化 B2B 转化率?这些步骤你不可不知
大数据·安全·阿里云·ai·ai写作
林农18 小时前
C02S11-Linux系统的安全与控制
linux·云计算
danns88821 小时前
什么是 AWS PrivateLink
云计算·aws
shiran小坚果1 天前
AWS RDS MySQL内存使用
数据库·mysql·云计算·database·aws