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("上传成功!");
        });
    },
相关推荐
天翼云开发者社区10 小时前
亮相2025年服贸会,天翼云打造高质量算力服务新生态!
云计算·天翼云
Serverless社区1 天前
函数计算的云上计费演进:从请求驱动到价值驱动,助力企业走向 AI 时代
阿里云·云原生·serverless
容器魔方2 天前
Bloomberg 正式加入 Karmada 用户组!
云原生·容器·云计算
AKAMAI3 天前
Sport Network 凭借 Akamai 实现卓越成就
人工智能·云原生·云计算
10岁的博客3 天前
《云计算如何驱动企业数字化转型:关键技术与实践案例》
云计算
m0_694845574 天前
教你使用服务器如何搭建数据库
linux·运维·服务器·数据库·云计算
shinelord明4 天前
【数据行业发展】可信数据空间~数据价值的新型基础设施
大数据·架构·云计算·创业创新
XINVRY-FPGA4 天前
XCKU15P-2FFVA1760I AMD 赛灵思 Xilinx Kintex UltraScale+ FPGA
arm开发·嵌入式硬件·阿里云·fpga开发·云计算·硬件工程·fpga
王道长服务器 | 亚马逊云4 天前
一个迁移案例:从传统 IDC 到 AWS 的真实对比
java·spring boot·git·云计算·github·dubbo·aws
世间小小鱼4 天前
【爬坑指南】亚马逊文件中心 AWS S3 预签名URL 前端直传
前端·云计算·aws