proginn-frontend/pages/user/new_video.vue

<template>
  <div class="box">
    <div class="add" @click="add()">+</div>
    <input id="video" ref="add" type="file" accept="video/*" @change="afterRead2()" hidden="true" />
    <div class="tip">说明：当此最多允许传1G视频,推荐采用MP4、flv格式,可缩短审核转码耗时</div>
    <van-overlay :show="videoShow" @click="closeVideo">
      <div class="wrapper flex">
        <video id="video-play " :src="src" ref="videos" controls @click.stop></video>
        <el-button
          class="btn"
          type="primary"
          :loading="btn.loading"
          @click="getAuth()"
          @click.stop
        >{{btn.title}}</el-button>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import "@/assets/css/common.css";
import Vue from "vue";
import { Overlay } from "vant";
import { Button } from "element-ui";
import { Uploader, Icon, Toast } from "vant";

export default {
  layout: "opacity_header",
  async asyncData({ $axios, params, req }) {
    return {
      title: `选择视频-程序员客栈`
    };
  },
  head() {
    return {
      title: this.title,
      script: [
        {
          src: "https://hm.baidu.com/hm.js?18455f493c982100e5a82ec978a8d06e"
        },
        {
          src: "https://stacdn.proginn.com/quan_v3/aliyun-upload-sdk/lib/es6-promise.min.js"
        },
        {
          src: "https://stacdn.proginn.com/quan_v3/aliyun-upload-sdk/lib/aliyun-oss-sdk-5.3.1.min.js"
        },
        {
          src:"https://stacdn.proginn.com/quan_v3/aliyun-upload-sdk/aliyun-upload-sdk-1.5.0.min.js"
        }
      ]
    };
  },
  data() {
    return {
      src: "",
      fileList: [],
      videoShow: false,
      uploadInfo: {},
      file: null,
      fileName: null,
      btn: {
        loading: false,
        title: "开始上传"
      }
    };
  },
  created() {
    this.needLogin();
  },
  methods: {
    //开始上传，
    getAuth() {
      let that = this;
      that.btn.loading = true;
      that.btn.title = "读取文件";
      this.$axios
        .$post("/api/jishuquan/get_upload_token", {
          file_name: "test.mp4"
        })
        .then(res => {
          console.log(res);
          that.uploadInfo = {
            uploadAuth: res.data.UploadAuth,
            uploadAddress: res.data.UploadAddress,
            videoId: res.data.VideoId
          };
          that.btn.title = "开始上传";
          that.uploadVideo();
        });
    },
    uploadVideo() {
      let userData = '{"Vod":{}}';
      let uploader = this.createUploader();
      uploader.addFile(this.file, null, null, null, userData);
      uploader.startUpload();
    },
    goCreate() {
      console.log("++++++++++++++", this.uploadInfo.videoId);
      this.$router.push({
        path: "/user/new_video_upload",
        query: { vid: this.uploadInfo.videoId }
      });
    },
    createUploader(type) {
      let self = this;
      let uploader = new AliyunUpload.Vod({
        timeout: 60000,
        partSize: 1048576,
        parallel: 5,
        retryCount: 3,
        retryDuration: 2,
        region: "cn-beijing",
        userId: "1402206442454882",
        enableUploadProgress: true,
        // 添加文件成功
        addFileSuccess: function(uploadInfo) {
          console.log("addFileSuccess: " + uploadInfo.file.name);
        },
        // 开始上传
        onUploadstarted: function(uploadInfo) {
          // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
          // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
          // 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
          // 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
          // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
          // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
          // if (!uploadInfo.videoId) {
          //   let createUrl =
          //     'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/CreateUploadVideo?Title=testvod1&FileName=aa.mp4&BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&VideoId=5bfcc7864fc14b96972842172207c9e6'
          //   axios.get(createUrl).then(({
          //     data
          //   }) => {
          //     let uploadAuth = data.UploadAuth
          //     let uploadAddress = data.UploadAddress
          //     let videoId = data.VideoId
          uploader.setUploadAuthAndAddress(
            uploadInfo,
            self.uploadInfo.uploadAuth,
            self.uploadInfo.uploadAddress,
            self.uploadInfo.videoId
          );
          // })
          console.log(
            "onUploadStarted:" +
              uploadInfo.file.name +
              ", endpoint:" +
              uploadInfo.endpoint +
              ", bucket:" +
              uploadInfo.bucket +
              ", object:" +
              uploadInfo.object
          );
          // } else {
          //   // 如果videoId有值，根据videoId刷新上传凭证
          //   // https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
          //   let refreshUrl =
          //     'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' +
          //     uploadInfo.videoId
          //   axios.get(refreshUrl).then(({
          //     data
          //   }) => {
          //     let uploadAuth = data.UploadAuth
          //     let uploadAddress = data.UploadAddress
          //     let videoId = data.VideoId
          //     uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
          //   })
          // }
        },
        // 文件上传成功
        onUploadSucceed: function(uploadInfo) {
          console.log(
            "onUploadSucceed: " +
              uploadInfo.file.name +
              ", endpoint:" +
              uploadInfo.endpoint +
              ", bucket:" +
              uploadInfo.bucket +
              ", object:" +
              uploadInfo.object
          );
          self.statusText = "文件上传成功!";
          self.goCreate();
        },
        // 文件上传失败
        onUploadFailed: function(uploadInfo, code, message) {
          console.log(
            "onUploadFailed: file:" +
              uploadInfo.file.name +
              ",code:" +
              code +
              ", message:" +
              message
          );
          self.statusText = "文件上传失败!";
        },
        // 取消文件上传
        onUploadCanceled: function(uploadInfo, code, message) {
          console.log(
            "Canceled file: " +
              uploadInfo.file.name +
              ", code: " +
              code +
              ", message:" +
              message
          );
          self.statusText = "文件已暂停上传";
        },
        // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
        onUploadProgress: function(uploadInfo, totalSize, progress) {
          console.log(
            "onUploadProgress:file:" +
              uploadInfo.file.name +
              ", fileSize:" +
              totalSize +
              ", percent:" +
              Math.ceil(progress * 100) +
              "%"
          );
          let progressPercent = Math.ceil(progress * 100);
          self.btn.title = "已上传" + Math.ceil(progress * 100) + "%";
        },
        // 上传凭证超时
        onUploadTokenExpired: function(uploadInfo) {
          // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
          // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
          // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
          let refreshUrl =
            "https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=" +
            uploadInfo.videoId;
          axios.get(refreshUrl).then(({ data }) => {
            let uploadAuth = data.UploadAuth;
            uploader.resumeUploadWithAuth(uploadAuth);
            console.log(
              "upload expired and resume upload with uploadauth " + uploadAuth
            );
          });
          self.statusText = "文件超时...";
        },
        // 全部文件上传结束
        onUploadEnd: function(uploadInfo) {
          console.log("onUploadEnd: uploaded all the files");
          self.statusText = "文件上传完毕";
        }
      });
      return uploader;
    },
    //关闭遮罩
    closeVideo() {
      this.videoShow = false;
      this.$refs.add.value = null;
    },
    //点击添加按钮
    add() {
      this.$refs.add.click();
    },
    //监听用户选择文件
    afterRead2(res) {
      var that = this;
      console.log("---------+++s");
      var current = event.target.files[0];
      this.file = current;
      console.log(current);
      if (!current) {
        return false;
      }
      if (current.size >= 1024 * 1024 * 1024) {
        Toast.fail("视频文件过大!");
        return false;
      }
      var fileReader = new FileReader();
      fileReader.readAsDataURL(current);
      var that = this;
      fileReader.onload = function(e) {
        console.log(e);
        that.src = e.currentTarget.result;
        that.videoShow = true;
        that.filename = current.name;
      };
    }
  }
};
</script>
<style scoped="">
.el-button.is-loading {
  position: absolute;
}

.btn {
  position: absolute;
  right: 7%;
  top: 85%;
}

video {
  width: 100%;
  max-height: 95vh;
  margin: auto;
  border: 1px solid rgba(200, 200, 200, 0.5);
}

body {
  background-color: white;
}
</style>
<style lang='less' scoped>
.wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.add {
  font-size: 50px;
  color: gray;
  font-weight: 100;
  width: 80px;
  height: 80px;
  line-height: 72px;
  text-align: center;
  border: 1px dashed rgb(200, 200, 200);
  margin-top: 8px;
  margin-bottom: 25px;
  margin-right: 10px;
}

.box {
  margin-top: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*  .btn {
    width: 2.8rem;
    height: 0.8rem;
    background: rgba(48, 142, 255, 1);
    box-shadow: 0rem 0.04rem 0.12rem 0rem rgba(48, 142, 255, 0.3);
    border-radius: 0.04rem;
    line-height: 0.8rem;
    text-align: center;
    font-size: 0.28rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    margin-top: 0.64rem;
  }
 */
.link > span {
  font-size: 0.24rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(48, 142, 255, 1);
}

.link {
  font-size: 0.26rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(146, 154, 164, 1);
  line-height: 0.36rem;
}

.tip {
  width: 82%;
  font-size: 0.3rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(44, 52, 62, 0.7);
  line-height: 0.51rem;
  margin-top: 0.36rem;
  margin-bottom: 0.07rem;
}

img {
  width: 3.28rem;
  height: 2.7rem;
}
</style>