前端实现图片或视频预览的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>