vue 上传视频并回显

<div>
    <input class="file" name="file" type="file" accept="video/*" @change="updateFace" />
    <video class="video" :src="AUDIO" controls="controls"></video>
    <button @click="AUDIO = ''">删除视频</button>
 </div>

data() {
   return {
      AUDIO: '', // 视频地址
   };
}

 

第一种，转成 bs64码

methods: {
  updateFace(e) {
    const file = e.target.files[0] || e.dataTransfer.files[0]
    // 第一种，转成 base64码
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload=()=>{
      this.AUDIO = reader.result
      console.log(reader.result,'地址')
    }
  }
}

 

第二种，转成 blob地址

methods: {
  updateFace(e) {
    const file = e.target.files[0] || e.dataTransfer.files[0]
    let URL = window.URL || window.webkitURL; // 获取当前域名地址
    this.AUDIO = URL.createObjectURL(file);   // 拼接 URL + file 并转成 blob地址
  }
}

 

本文参考至： https://www.cnblogs.com/tlfe/p/12066779.html