ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端实现图片或视频预览的3种方法 [打印本页]

---

作者: 泉缘泉    时间: 2024-7-19 23:04
标题: 前端实现图片或视频预览的3种方法
一、上传到OSS大概服务器
缺点：
1.大文件上传时间过长
2.如果用户只是预览则会浪费服务端存储
二、利用FileReader对象转换File对象为base64

1. <input type="file" id="videoInput">
2. <video src="" alt="预览" id="video" controls="controls">
3. <script>
4.   const videoInput = document.getElementById('videoInput');
5.   videoInput.addEventListener('change', e => {
6.     previewByReader(e.target.files[0])
7.   })
9. function fileToBase64(file: File): Promise<{ url: any, filename: string }> {
10.   const fileReader = new FileReader()
11.   fileReader.readAsDataURL(file)
12.   var filename = file.name;
13.   return new Promise((resolve, reject) => {
14.     fileReader.addEventListener("loadend", (e: ProgressEvent<FileReader>) => {
15.       var url: any = e.target!.result;
16.       resolve({ url, filename })
17.     }, false);
18.   })
19. }
20.   async function previewByReader (file) {
21.    const {url} = await fileToBase64(file)
22.    video.src = url
23.   }
24. </script>

复制代码

三、通过blob协议实现预览

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4