Vue 实现阿里云 OSS 视频分片上传：安全实战与完整方案

在中后台系统或视频类应用中，大文件（尤其是视频）上传是高频需求。直接上传不仅容易因网络波动失败，还可能暴露密钥导致安全风险。本文基于实际项目代码，详细讲解 Vue 结合阿里云 OSS 实现安全、稳定的视频分片上传方案，所有敏感信息已做加密处理，可直接参考落地。

一、核心技术选型与优势

核心依赖
前端框架：Vue 2.x（适配 Element UI 组件库）
存储服务：阿里云 OSS（对象存储服务，高可用、高并发支持）
上传方式：OSS 分片上传（multipartUpload）
安全机制：STS 临时授权（避免永久 AccessKey 泄露）

方案核心优势

大文件友好：分片上传将视频拆分为小块传输，降低网络波动影响，支持 GB 级文件
安全无风险：通过 STS 生成临时授权凭证，前端不暴露永久密钥
体验优化：支持上传进度可视化、加载提示、结果反馈，交互更流畅
命名唯一：自动生成唯一文件名，避免文件覆盖冲突

完整实现代码

前端上传核心函数

typescript 复制代码

uploadSource2(param) {
  let app = this;
  // 1. 获取待上传文件对象
  let file = param.file;
  
  // 2. 生成唯一文件名（避免冲突）
  let fileName =
    Math.round(Math.random() * 1000) +
    "drl" +
    Math.floor(Math.random() * 90000000) +
    10000000 +
    "." +
    file.name.split(".").pop(); // 保留原文件后缀

  // 3. 显示上传加载提示（Element UI 组件）
  const loading = this.$loading({
    lock: true,
    text: '视频上传中...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });

  // 4. 调用后端接口获取 OSS 临时授权凭证（关键安全步骤）
  this.apiData.getOSSToken().then((res) => {
    if (res.code == 200) {
      // 加密处理：实际项目中后端返回的凭证仅临时有效，前端不存储
      let ossconfig = res.data; // 包含临时 AccessKeyId、Secret、Token
      // OSS 基础配置（存储桶、地域等固定信息，可配置在环境变量）
      let prefix = "/jfrj/"; // OSS 文件存储前缀（分类目录）
      let bucket = "xxx-oss-bucket"; // 加密处理：替换为你的 OSS 存储桶名称
      let region = "oss-cn-shanghai"; // OSS 地域（上海）

      // 5. 初始化 OSS 客户端
      const client = new OSS({
        region: region,
        accessKeyId: ossconfig.accessKeyId, // 临时 AccessKeyId（1-2小时有效期）
        accessKeySecret: ossconfig.accessKeySecret, // 临时 AccessKeySecret
        stsToken: ossconfig.securityToken, // STS 临时令牌（核心安全凭证）
        bucket: bucket,
      });

      // 6. 分片上传文件到 OSS
      client
        .multipartUpload(prefix + fileName, file, {
          partSize: 102400, // 分片大小：100KB（可根据需求调整，建议 50KB-2MB）
          progress: function (percentage, cpt, res) {
            // 实时打印上传进度（可绑定到进度条组件）
            console.log('上传进度:', Math.floor(percentage * 100) + '%');
          },
        })
        .then((response) => {
          // 7. 上传成功处理
          loading.close(); // 关闭加载提示
          if (response.res.status === 200) {
            // 拼接文件访问 URL（CDN 加速域名 + 存储路径）
            let url = "https://xxx-cdn.aliyuncs.com/jfrj/"; // 加密处理：替换为你的 CDN 域名
            let fileInfo = {
              name: fileName,
              oss_file_name: response.name, // OSS 存储的完整路径
              url: url + fileName, // 最终可访问的视频 URL
            };
            // 将 URL 存入表单（根据项目需求调整存储逻辑）
            if (!this.form.videoList) {
              this.$set(this.form, 'videoList', []); // 响应式初始化数组
            }
            this.form.videoList.push(fileInfo.url);
            console.log("视频上传成功，信息：", fileInfo);
            this.$message.success('视频上传成功'); // 成功提示
          }
        })
        .catch(function (err) {
          // 8. 上传失败处理
          loading.close();
          console.error("视频上传失败：", err);
          this.$message.error('视频上传失败，请检查网络后重试');
        }.bind(this));
    } else {
      // 获取凭证失败处理
      loading.close();
      this.$message.error('获取上传权限失败，请刷新页面重试');
    }
  }).catch((err) => {
    // 接口请求失败处理
    loading.close();
    console.error("获取 OSS 授权凭证错误：", err);
    this.$message.error('服务器连接失败，请检查网络');
  });
}

关键依赖安装

typescript 复制代码

npm install ali-oss --save