在vue中如何实现上传本地视频和图片预览
话不多说贴上代码
<template>
<div>
<!-- <input type="file" accept="image/*" @change="loadFile">
<img id="file" width="480" height="270" v-show="showImg"/> -->
<input type="file" accept="video/*" @change="loadFile">
<video id="file" width="480" height="270" v-show="showVideo" controls/>
</div>
</template>
<script>
export default {
data(){
return {
showImg:false
showVideo:false
}
},
methods:{
loadFile(event){
const reader = new FileReader();
const that = this
//如果是SSR渲染需要加上如下判断(比如nuxt)
if(!process.browser)return
reader.onload = function(){
const output = document.querySelector("#file")
that.showVideo = true;
output.src = URL.createObjectURL(new Blob([reader.result]))
}
reader.readAsArrayBuffer(event.target.files[0])
}
}
}
</script>
主要利用 URL.createObjectURL()方法来实现。URL.createObjectURL()会创建 DOMString。其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定。这个新的URL对象表示指定的file对象或者blob对象。