一、思路:利用 FileReader.readAsDataURL()将本地文件转成base64的src,然后赋值给标签;
如果不知道怎么使用blob和FileReader,可以先预览前置文章 https://blog.csdn.net/qq_45301392/article/details/115623849
FileReader.readAsDataURL()
开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
// 一个文件上传的回调
// <input type="file" οnchange="onChange(event)">
function onChange(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
// 文件里的文本会在这里被打印出来
console.log(event.target.result)
};
reader.readAsDataURL(file);
}
需要注意 FileReader.readAsDataURL() 是异步方法,异步读取文件。所以不能马上使用,需要利用 onload() 方法异步获取本地文件的url;
FileReader.onload 处理load (en-US)事件。该事件在读取操作完成时触发。
二、案例代码:
<video v-if="videoSrc" width="320" height="240" controls>
<source :src="videoSrc" type="video/mp4">
<source :src="videoSrc" type="video/ogg">
您的浏览器不支持Video标签。
</video>
data() {
return {
videoSrc:''
};
},
// 上传文件
filechange(e){
const resultFile = e.target.files;
const aBlob = new Blob([resultFile[0]],{type:'video/mp4'})
const reader = new FileReader();
reader.onload=(ev)=>{
this.videoSrc = ev.target.result
}
reader.readAsDataURL(aBlob)
},
采坑代码:
filechange(e){
const resultFile = e.target.files;
const aBlob = new Blob([resultFile[0]],{type:'video/mp4'})
const reader = new FileReader();
reader.readAsDataURL(aBlob)
// 不能把异步操作赋值给标签
this.videoSrc = reader.result;
},