vue上传视频到华为云obs

公司做的后台，需要上传视频，但是视频会非常的大，动不动就到了1G。后端接口上传肯定是非常慢的，公司决定使用华为云直传。
我看到有两种方法一个是npm下载，第二个就是github下载文件引入，今天讲的是第二个

1、下载文件github网络太慢了，我放在我的gitee仓库了点击这里下载—>sdk源码
2、下载好的 esdk-obs-browserjs-without-polyfill.3.22.3.min.js 放在你项目的public下面

3、在项目的html文件引入esdk-obs-browserjs-without-polyfill.3.22.3.min.js

<script src="esdk-obs-browserjs-without-polyfill.3.22.3.min.js">

4、在页面中使用，注意要公司运维或者负责人给你提供access_key_id、secret_access_key、server还有回显的时候用到的回显域名，我项目里的是‘https://download.elibr.cn/’，你要换成你自己的

<template>
  <div>
    <el-upload class="avatar-uploader" action="" accept=".mp4" :http-request="httpRequest"
      list-type="picture-card" :show-file-list="false">
      <video v-if="mediaFile" :src="mediaFile" class="avatar video-avatar" controls="controls">
        您的浏览器不支持视频播放
      </video>
      <i v-else-if="mediaFile == '' && !videoFlag" slot="default"
        class="el-icon-plus avatar-uploader-icon"></i>
      <i class="el-icon-delete dels" v-if="mediaFile != '' && !videoFlag"
        @click.stop="delVideo(index)">
      </i>
      <el-progress v-if="videoFlag" class="progress" width="100" type="circle"
        :percentage="videoUploadPercent">
      </el-progress>
    </el-upload>
    <p>仅支持上传MP4格式文件，大小限100M以下</p>
  </div>
</template>
<script>
// 创建ObsClient实例
var obsClient = new ObsClient({
  access_key_id: '你申请的access_key_id',
  secret_access_key: '你申请的secret_access_key',
  server: '你的华为云上传地址',
  // timeout: 900 // 15分钟
  timeout: 1200 // 20分钟，这个是设置超时时间，我在本地测试上传1G的视频大概需要15分钟
});
export default {
  data () {
    return {
      videoUploadPercent: 0,
      videoFlag: false,
      mediaFile: ''
    }
  },
  methods: {
    //自定义上传
    httpRequest (fileObj) {
      console.log(fileObj, 'fileObj')
      var fileSize = fileObj.file.size / 1024 / 1024 < 100;   //控制大小100M
      if (["video/mp4"].indexOf(fileObj.file.type) == -1) {
        this.$message.warning('仅支持上传MP4格式文件')
        return false
      }
      if (!fileSize) {
        this.$message.warning('视频大小不能超过100M')
        return false;
      }
      var _this = this
      obsClient.putObject({
        Bucket: 'cloud-library', //桶名，公司运维或者负责人给你提供
        Key: `${fileObj.file.uid}-${fileObj.file.name}`,
        SourceFile: fileObj.file,
        ProgressCallback: function (transferredAmount, totalAmount, totalSeconds) {
          _this.$nextTick(() => {
            _this.videoFlag = true
            _this.videoUploadPercent = Math.floor(transferredAmount * 100.0 / totalAmount)
          })
        }
      }, (err, result) => {
        if (err) {
          this.videoFlag = false;
          this.mediaFile = ''
          this.videoUploadPercent = 0
          this.$message.error('上传失败')
          console.error('Error-->' + err);
        } else {
          this.videoFlag = false;
          this.videoUploadPercent = 0;
          this.mediaFile = 'https://download.elibr.cn/' + fileObj.file.uid + '-' + encodeURIComponent(fileObj.file.name)  //回显的url一定要用encodeURIComponent解析，因为文件名是中文的话是无法回显的
          console.log(this.mediaFile, '<---这个地址就可以显示你的线上视频了')
        }
      });
    },
    //删除视频
    delVideo () {
      this.mediaFile = ''
      this.videoFlag = false
    }

  }
}
</script>
<style>
.avatar-uploader .el-upload {
  position: relative;
  width: 158px;
  height: 158px;
  line-height: 158px !important;
  text-align: center;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  width: 158px;
  height: 158px;
  display: block;
}
.dels {
  position: absolute;
  color: #d7311e !important;
  font-size: 20px;
  z-index: 99;
  top: 6px;
  right: 6px;
}
.el-progress {
  margin-top: 29px;
}
</style>

5、注意事项
你可能上传的时候会遇到跨域的问题，如下图：

这时候你要跟你的负责人或者公司运维说，配置桶的CORS
（1）、登录OBS Console后在桶列表中，单击待操作的桶，进入“概览”页面；
（2）、在“基础配置”下，单击“CORS规则”卡片，进入“CORS规则”界面，如下图所示：

（3）、在“CORS规则”界面，单击“创建”，系统弹出“创建CORS规则”对话框，在该对话框中按照上表的参数进行配置，如下图所示：

4、点击“确定”后，就配置好了规则，等两分钟你再去上传视频，就不会有跨域的问题了