初步使用ali-oss 进行视频分片上传记录

准备工作 阿里云OSS控制台配置找到对应bucket

通过浏览器直接访问OSS时，CORS配置规则要求如下：
* 来源：设置为*。
* 允许 Methods：选中GET、POST、PUT、DELETE以及HEAD。
* 允许 Headers：设置为*。
* 暴露 Headers：设置为ETag以及x-oss-request-id。

参考文档： help.aliyun.com/document_de…

1.引入 aliyun-oss SDK

npm install ali-oss

2. 通过后台提供接口获取oss相关配置

async getOssData() {
    const initOSSData = await api[method]()
    <!--{-->
    <!--    host: initOSSData.host,-->
    <!--    accessId: initOSSData.accessId,-->
    <!--    policy: initOSSData.policy,-->
    <!--    expireSecondsAt: initOSSData.expireSecondsAt,-->
    <!--    signature: initOSSData.signature,-->
    <!--    OSSAccessKeyId: initOSSData.accessId,-->
    <!--    key: initOSSData.dir + fileName-->
    <!-- }-->
    return initOSSData
}

3. 创建OSS对象

initOSS() {
  const initOSSData = getOssData()
  const { AccessKeyId, AccessKeySecret, SecurityToken, bucket, region } = initOSSData;
      /**
       *  [accessKeyId] {String}：通过阿里云控制台创建的AccessKey。
       *  [accessKeySecret] {String}：通过阿里云控制台创建的AccessSecret。
       *  [bucket] {String}：通过控制台或PutBucket创建的bucket也就是阿里云仓库的名称。
       *  [region] {String}：bucket阿里云所在的区域， 默认oss-cn-hangzhou。
       */
  return new OSS({
    accessKeyId: AccessKeyId,
    accessKeySecret: AccessKeySecret,
    <!--stsToken: SecurityToken,  // STS凭证暂且还没做 -->
    secure: true, //* 这句话很重要！！！！！！！！！
    bucket,
    region
  });
}

4.点击上传按钮事件

*** http-request="Upload" // 因为用的是elementui的上传组件 使用自定义上传事件 ***

     // 拼接随机数文件名
     getFileNameUUID() {
        function rx() {
          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
        }
        return `${+new Date()}_${rx()}${rx()}`
      },

      async Upload(file) {
        const that = this;
        const newDate = Date.parse(new Date())
        const OSS = await this.initOSS()
        async function multipartUpload() {
          let temporary = file.file.name.lastIndexOf(".");
          let fileNameLength = file.file.name.length;
          let fileFormat = file.file.name.substring(
            temporary + 1,
            fileNameLength
          );
          let fileName = that.getFileNameUUID() + "." + fileFormat;
          console.log(OSS, 'oss对象',fileName,  file)
          
          <!--your_route是你要上传文件夹的路径，后端同事可以返给你也可以自己拼接，我这里是自己拼接的，比如你的bucket下有个文件夹叫pc,你要上传到pc这个文件夹下，your_route就是‘/pc/’,file是你的上传的file其中分片上传如果图片大于100k，返回的路径最后会自动带一个？uploadId=***********之类的参数，我在这里是自己截取处理了一下-->
          const lastFlieName = `your_route${fileName}`
          // 第一个参数是最终要生成的文件名带文件类型 
          // 第二个参数是要上传的本地文件
          // 第三个参数 是oss对应配置以及处理方法
          OSS.multipartUpload(lastFlieName, file.file, {
              progress: function(p) { // 进度条处理函数
                // p 进度条的值
                that.showProgress = true;
                that.progress = Math.floor(p * 100);
                console.log(that.progress, 'p进度条的值');
              },
              partSize: 1000 * 1024,//设置分片大小
              timeout: 120000,//设置超时时间
            })
            .then(result => {
              //上传成功返回值，可针对项目需求写其他逻辑
              let video = result.res.requestUrls[0].split("?")[0]
              console.log(result, '上传成功数据', video)
            })
            .catch(err => {
              console.log("err:", err);
            });
        }
        multipartUpload();
      }

视图参考

<el-upload
  action
  :show-file-list="false"
  :http-request="Upload"
  :before-upload="beforeAvatarUpload"
  :on-success="uploadSucess"
>
  <div>
    <el-button style="margin-bottom: 10px;" type="primary">{{video ? '替换视频' : '上传视频'}}</el-button>
  </div>
  <div>
    <el-progress v-if="showProgress" type="circle" :percentage="progress" style="margin-top:30px;"></el-progress>
  </div>
</el-upload>