input选择视频或图片本地预览问题
图片目前可以用两个方法,示例是vue代码,原生用的话需要小改下预览图片 1 <input id="filepicker" @change="chooseImgInput" type="file" class="upload_icon"> <img :src=&quo
·
图片目前可以用两个方法,示例是vue代码,原生用的话需要小改下
预览图片 1
<input id="filepicker" @change="chooseImgInput" type="file" class="upload_icon">
<img :src="imgUrl" src="">
chooseImgInput(event) { //选择图片加载到图片裁剪工具里
var that = this;
var files = document.getElementById("filepicker").files[0];
this.fileName = files.name;
var reader = new FileReader();
reader.readAsDataURL(files);
reader.onload = function(e) {
that.visible = true;
that.imgUrl = this.result;
}
},
预览图片 2
<input id="filepicker" @change="chooseImgInput" type="file" class="upload_icon">
<img :src="imgUrl" src="">
chooseImgInput(event) {
var files = document.getElementById("filepicker").files[0];
var url = URL.createObjectURL(files);
this.imgUrl = url;
},
预览视频
<input type="file" id="filepicker" accept="video/mp4" @change="chooseVideoInput" class="uploadVideo_input">
<video id="video" poster="封面图路径" :src="video_url" :controls="controls" x5-playsinline="" playsinline="" webkit-playsinline preload="auto"></video>
chooseVideoInput(event) {
var files = document.getElementById("filepicker").files[0];
var url = URL.createObjectURL(files);
this.video_url= url;
},
:controls="controls" x5-playsinline="" playsinline="" webkit-playsinline preload="auto"
//这几个属性是解决原生视频video标签在ios手机上自动去安平播放的问题,controls是是否显示控制栏
更多推荐
已为社区贡献5条内容
所有评论(0)