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("上传成功!");
        });
    },
相关推荐
m0_694845575 小时前
服务器需要备案吗?在哪些地区需要备案?
linux·运维·服务器·云计算
云资源服务商11 小时前
解锁阿里云日志服务SLS:云时代的日志管理利器
服务器·阿里云·云计算
朱包林12 小时前
day45-nginx复杂跳转与https
linux·运维·服务器·网络·云计算
m0_694845571 天前
服务器如何配置防火墙规则开放/关闭端口?
linux·服务器·安全·云计算
安 当 加 密1 天前
多云密钥统一管理实战:CKMS对接阿里云/华为云密钥服务
数据库·阿里云·华为云
观测云1 天前
观测云 × AWS SSO:权限治理可观测实践
云计算·aws
G皮T1 天前
【云计算】企业项目 & 策略授权
云计算·iam·公有云·企业项目·策略授权·统一身份认证
draymond71071 天前
阿里云-spring boot 接入SLS日志
阿里云
马里马里奥-2 天前
在Windows系统部署本地智能问答系统:基于百度云API完整教程
windows·云计算·百度云
来自于狂人11 天前
速通Ceph分布式存储(含超详细图解)
云计算