vue 上传视频并回显
<div> <input class="file" name="file" type="file" accept="video/*" @change="updateFace" /> <video class="video" :src="AUDIO" controls="controls"></video> <button @click="AUDIO = ''">删除视频</button> </div>
data() { return { AUDIO: '', // 视频地址 }; }
第一种,转成 bs64码
methods: { updateFace(e) { const file = e.target.files[0] || e.dataTransfer.files[0] // 第一种,转成 base64码 let reader = new FileReader() reader.readAsDataURL(file) reader.onload=()=>{ this.AUDIO = reader.result console.log(reader.result,'地址') } } }
第二种,转成 blob地址
methods: { updateFace(e) { const file = e.target.files[0] || e.dataTransfer.files[0] let URL = window.URL || window.webkitURL; // 获取当前域名地址 this.AUDIO = URL.createObjectURL(file); // 拼接 URL + file 并转成 blob地址 } }
本文参考至: https://www.cnblogs.com/tlfe/p/12066779.html