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>

 优化：

<!-- 上传图片或视频 -->
              <el-form-item label="xxx">
                <el-popover placement="right-start" title width="280" trigger="hover" top-content>
                  <img style="width: 250px;" src="https://cdn.lljgame.com/bc12_online/mall_main.png" alt="" />
                  <div class="bc_icon_instruction" slot="reference" style="margin-left: -5px;"></div>
                </el-popover>
                <el-upload
                  class="upload-demo upload-images"
                  action="https://up.qbox.me"
                  :limit="1"
                  :data="formData"
                  list-type="picture-card"
                  :file-list="fileList"
                  :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">
                  <div style="text-align: center;">
                    <img v-if="is_images" width="100%" :src="dialogImageUrl" alt="" />
                    <video v-else :src="dialogImageUrl" controls="controls" width="320" height="240" style="margin-left: 10px;"></video>
                  </div>
                </el-dialog>
              </el-form-item>




data() {
    return {
      is_images: false,
      dialogImageUrl: '',
      dialogVisible: false,
      formData: {
        token: '',
        key: ''
      },
      fileList: [],
      ruleForm: {
        win_img: ''
      },
    };
  },


//上传文件
    beforeUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10; //大小不能超过10MB
      let isJPG = ['image/jpeg', 'image/jpg', 'image/png', 'video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].includes(
        file.type
      );
      if (!isJPG) {
        return this.$message.warning('请上传 jpeg、jpg、png、mp4、ogg、flv、avi、wmv、rmvb 格式的图片或视频 ！');
      }
      this.getToken(); // 每次上传文件之前设置key
      this.formData.key = this.ruleForm.win_img = this.$utils.randomWord(false, 50);
    },
    //上传成功
    handleSuccess(response, file, fileList) {
      const isJPG = ['image/jpeg', 'image/jpg', 'image/png'];
      this.is_images = isJPG.includes(file.raw.type);
      if (isJPG.includes(file.raw.type)) {
        $('.upload-images .el-upload--picture-card').hide();
      } else {
        this.$nextTick(() => {
          $('.upload-images .el-upload--picture-card').hide();
          $('.upload-images .el-upload-list .el-upload-list__item').prepend('<video></video>');
          $('.upload-images .el-upload-list .el-upload-list__item video').addClass('el-upload-list__item-thumbnail');
          $('.upload-images .el-upload-list .el-upload-list__item video').attr({
            width: '320px',
            height: '240px',
            controls: 'controls',
            src: file.url
          });
          $('.upload-images .el-upload-list .el-upload-list__item img').remove();
        });
      }
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除文件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`, {
        type: 'warning'
      }).then(() => {
        this.ruleForm.win_img = '';
        $('.upload-images .el-upload--picture-card').show();
      });
    },