前端实现图片或视频预览的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)
})
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)
})
function previewByURL (file) {
video.src = URL.createObjectURL(file)
}
</script>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]