vue 上传文件预览

<template>
  <div class="container">
    <video ref="video" controls="controls" v-show="vedioname"></video>
    <input type="file" name="video" @change="onFileChange" />
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        vedioname: false
      };
    },
    watch: {},
    methods: {
      onFileChange: function(e) {
        this.vedioname = true;
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length) {
          return;
        } else {
          let _this = this; //视频预览

          var reader = new FileReader();
          this.file = files[0];
          reader.onload = function() {
            _this.$refs.video.src = this.result;
          };
          reader.readAsDataURL(this.file);
        }
      }
    },
    mounted() {}
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import "~@/assets/css/_mixin";
  video {
    width: 100%;
    height: auto;
  }
  input[type="file"] {
    color: transparent;
  }
</style>