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