vue如何实现input file如何实现预览效果？

最新推荐文章于 2024-08-12 19:46:57 发布

王海虎

最新推荐文章于 2024-08-12 19:46:57 发布

阅读量5.8k

点赞数 8

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/xiaohu12685/article/details/80383520

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我用的video的方式实现的

html

<label id="labelr" class="pop_file file_cont" for="pop_video">
    <div class="pfevi">
        <div><i class="iconfont icon-tianjia1"></i></div>
        <div>点击上传视频</div>
    </div>
    <video id="videoId"></video>
    <input style="display: none;" id="pop_video" type="file" accept="audio/mp4,video/mp4" v-on:change="uploadFile($event,'2')" name="fileTrans" ref="file" value="" />
</label>

css

.pop_file {
    width: 370px;
    height: 188px;
    margin-bottom: 30px;
    display: block;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: rgba(153, 153, 153, 1);
    background: rgba(247, 247, 247, 1);
    position: relative;
}
.pop_file video {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

uploadFile: function(ev, typer) {
    var that = this;
    var filesId = document.getElementById('pop_video');
    var videoId = document.getElementById('videoId');
    var url = getFileURL(filesId.files[0]); //把当前的 files[0] 传进去
    if(url) {
        videoId.src = url;
    }
    function getFileURL(file) {
        var getUrl = null;
        if(window.createObjectURL != undefined) { // basic
            getUrl = window.createObjectURL(file);
        } else if(window.URL != undefined) { // mozilla(firefox)
            getUrl = window.URL.createObjectURL(file);
        } else if(window.webkitURL != undefined) { // webkit or chrome
            getUrl = window.webkitURL.createObjectURL(file);
        }
        return getUrl;
    }
    var duration = videoId.duration;
    if(Math.floor(duration) > 60) {
        that.$layer.msg('视频不能大于60秒');
    }
}