[JavaScript知识库]vue项目:element-ui---el-upload上传视频

          <!-- 上传 -->
          <el-upload v-if="ruleForm.jump === 1" class="upload-demo text-images" action="https://up.qbox.me" :limit="1"
            :data="formData" list-type="picture-card" :file-list="photo" :before-upload="beforeUpload"
            :on-preview="handlePictureCardPreview" :on-success="handleSuccess" :before-remove="beforeRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <!-- <img width="100%" :src="dialogImageUrl" alt=""> -->
            <video :src="dialogImageUrl" controls="controls" width="320" height="240" style="margin-left: 10px;"></video>
          </el-dialog>
        

<script>
  import $ from "jquery";
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        formData: {
          token: '',
          key: ""
        },
        photo: [],
        ruleForm: {
          jump: 1,
          content: '',
          win_img: '',
        },
      };
    },
    methods: {

      //获取token
      async getToken() {
        let res = await this.$api.qiniu.getToken();
        if (res.data.success) {
          this.formData.token = res.data.token;
        }
      },
      S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      },
      guid() {
        return (this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + this
          .S4() + this.S4());
      },
      //上传文件之前
      beforeUpload(file) {
        const isJPG = ["image/jpeg", "image/jpg", "image/png", "video/mp4"].indexOf(file.type) > -1;
        if (!isJPG) {
          return this.$message.warning('请上传JPG、PNG格式的图片 !');
        }
        //每次上传文件之前设置key
        this.getToken();
        this.formData.key = this.ruleForm.win_img = new Date().getTime().toString() + this.guid();
      },
      //图片预览
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //文件上传成功
      handleSuccess(response, file, fileList) {
        this.$nextTick(() => {
          $(".text-images .el-upload--picture-card").hide();
          $(".text-images .el-upload-list .el-upload-list__item").prepend('<video></video>');
          $(".text-images .el-upload-list .el-upload-list__item video").addClass("el-upload-list__item-thumbnail");
          $(".text-images .el-upload-list .el-upload-list__item video").attr({
            "width": "320px",
            "height": "240px",
            "controls":"controls",
            "src":file.url
          })
          $(".text-images .el-upload-list .el-upload-list__item img").remove();
        })
      },
      //删除文件
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`, {
          type: "warning"
        }).then(() => {
          this.ruleForm.win_img = "";
          $(".text-images .el-upload--picture-card").show();
        });
      },
    },
    mounted() {
      this.getToken();
    }
  }
</script>

<style lang="less" scoped>
  .text-images {
    margin: 15px 0;

    /deep/ .el-upload--picture-card {
      width: 150px;
      height: 150px;
    }

    /deep/ .el-upload-list__item {
      width: 150px;
      height: 150px;
    }
  }

  /deep/ .el-form-item__label {
    font-weight: 400;
    font-size: 14px;
  }

  /deep/ .el-dialog {
    width: 25%;
  }

  .transfer-dialog /deep/ .el-dialog {
    width: 50%;
  }

  .err-tips {
    font-size: 12px;
    line-height: 20px;
  }
</style>
<style type="text/css">
  .el-message-box .el-message-box__content .el-message-box__message {
    padding: 0;
    margin: 60px 0 6px;
  }
</style>