element + 七牛云上传视频 视频太大用七牛云上传

//template代码
//第一次写博客 有不对的地方欢迎指正
            <el-form-item label="视频" prop="videoUrl">
              <el-upload
                class="upload-demo"
                ref="upload1"
                action="https://up-z2.qiniup.com"//这个链接是上传七牛云的连接，之前是https://qiniup.com 控制台报错 让我用https://up-z2.qiniup.com 代替 https://qiniup.com，写错也没事，他会报错让你改的（注意一下http 和 https）
                name="file"
                :limit="1"
                :file-list="fileList"
                :data="qiniuData" //这里面是参数 主要就是一个token和key
                :before-upload="beforeVideoUpload"
                :on-success="onVideoSuccess" //上传成功 会返回一个hash 和 key 直接把 key 和后台连接 拼接到一起，浏览器就能打开了
                :on-error="onVideoError"
              >
                <div class="el-default">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    点击上传
                  </div>
                </div>
              </el-upload>
            </el-form-item>




//js代码
export default {
  data() {
    return {
      qiniuData: {
        key: "",
        token: ""
      },
    };
  },
  mounted() {
    this.getQintoken();//一开始就是要获取token
  },
  methods: {
    getQintoken() {
    //获取七牛上传token 这个不是登录的token 是七牛的上传token之前傻逼还以为是那个登录token
    //后端给我开的接口 需要ACCESS_KEY 和 SECRET_KEY 可能后端直接加进去了 所以我只要传一个命名空名名字就行 
    //不要前端获取这个token 整了半天没整好 直接后端开接口 
    //七牛上传 我们写的比较简单 就三个参数 1.token 2.key 3.视频文件（file:(binary)）
    //一开始没想着用element写 但是网上那一堆都感觉很复杂 就百度了element + 七牛, upload组件 action写上传七牛云地址官方文档里有分了区域自己找下 和 :data就是参数token和key
      postDataAll(
        `qiNiuYun/getToken?hostName=${"后端需要的命名空间名字（这个参数问后端就行，七牛上有，我直接写死的）"}&userId=${this.userInfo.id}`
      )
        .then(res => {
          console.log(res);
          this.qiniuData.token = res.data.resultContent;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 上传视频前
    beforeVideoUpload(file) {
      this.qiniuData.key = file.name; // key为上传后文件名 必填
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb"
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("不支持的文件类型");
        return false;
      }
    },
    // 上传视频成功
    onVideoSuccess(res, file) {
      console.log(res, file);
      this.videoFrom.videoUrl = `后台让我拼接的前缀`+ res.key
     
    },
};