VUE实现视频，图片上传预览功能

最近在做一个视频上传预览功能，在获取文件绝对路径时，路径被浏览器的安全保护机制给改成了C:\fakepath\XXX，但是又需要文件的绝对路径才能完成预览功能。

首先先贴上效果图

HTML部分

添加video和input控件

<video :src="videoSrc" controls="controls" width="500" height="400"></video>
<input type="file" @change="getBigectURL($event)" />

添加一个change事件，一旦选择好了需要上传的视频，我们就应该预览出来
@change事件用于监听上传文件变化，$event用于传递file

JS部分

data () {
    return {
      videoSrc: ''
    }
  },
  methods: {
    getBigectURL (event) {
      console.log('getBigectURL', event)
      var current = event.target.files[0]
      var fileReader = new FileReader()
      fileReader .readAsDataURL(current)
      var that = this
      fileReader .onload = function (e) {
        that.videoSrc = e.currentTarget.result
      }
    },
}

使用 （current）获取到这个视频文件。通过( fileReader )调用html5的FileReader对象，来读取到上传的视频文件，并把视频文件转换成base64字符串，然后把这个字符串（that.videoSrc）赋值绑定到img控件

ps：此方法可完成视频或图片预览
pps：上传的图片或视频不宜太大，否则会卡哦