js读取本地视频文件，并预览base64，video

一、思路：利用 FileReader.readAsDataURL()将本地文件转成base64的src，然后赋值给标签；

如果不知道怎么使用blob和FileReader，可以先预览前置文章 https://blog.csdn.net/qq_45301392/article/details/115623849

FileReader.readAsDataURL()
开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。

// 一个文件上传的回调 
// <input type="file" οnchange="onChange(event)">
function onChange(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    // 文件里的文本会在这里被打印出来
    console.log(event.target.result)
  };
  reader.readAsDataURL(file);
}

需要注意 FileReader.readAsDataURL() 是异步方法，异步读取文件。所以不能马上使用，需要利用 onload() 方法异步获取本地文件的url；
FileReader.onload 处理load (en-US)事件。该事件在读取操作完成时触发。

二、案例代码：

<video v-if="videoSrc" width="320" height="240" controls>
   <source :src="videoSrc" type="video/mp4">
   <source :src="videoSrc" type="video/ogg">
   您的浏览器不支持Video标签。
 </video>

data() {
  return {
     videoSrc:''
   };
 },
    
// 上传文件
filechange(e){
   const resultFile = e.target.files;
   const aBlob = new Blob([resultFile[0]],{type:'video/mp4'})
   const reader = new FileReader();
   reader.onload=(ev)=>{
     this.videoSrc = ev.target.result
   }
   reader.readAsDataURL(aBlob)
 },

采坑代码:

  filechange(e){
     const resultFile = e.target.files;
     const aBlob = new Blob([resultFile[0]],{type:'video/mp4'})
     const reader = new FileReader();
     reader.readAsDataURL(aBlob)
     
     // 不能把异步操作赋值给标签
     this.videoSrc = reader.result; 
   },