前端实现图片或视频预览的3种方法

一、上传到OSS或者服务器
缺点：
1.大文件上传时间过长
2.如果用户只是预览则会浪费服务端存储

二、使用FileReader对象转换File对象为base64

<input type="file" id="videoInput"><video src="" alt="预览" id="video" controls="controls"><script>  const videoInput = document.getElementById('videoInput');  videoInput.addEventListener('change', e => {    previewByReader(e.target.files[0])  })function fileToBase64(file: File): Promise<{ url: any, filename: string }> {  const fileReader = new FileReader()  fileReader.readAsDataURL(file)  var filename = file.name;  return new Promise((resolve, reject) => {    fileReader.addEventListener("loadend", (e: ProgressEvent<FileReader>) => {      var url: any = e.target!.result;      resolve({ url, filename })    }, false);  })}  async function previewByReader (file) {   const {url} = await fileToBase64(file)   video.src = url  }</script>

三、通过blob协议实现预览

<input type="file" id="videoInput">  <video src="" alt="预览" id="video" controls="controls" width="400" height="200">  <script>    const videoInput = document.getElementById('videoInput');    videoInput.addEventListener('change', e => {      previewByURL(e.target.files[0])    })    function previewByURL (file) {      video.src = URL.createObjectURL(file)    }  </script>