图片示例

主要代码

1、把图片视频转成本地的地址在页面显示

 getObjectURL(file) {var url = null;// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已if (window.createObjectURL != undefined) {// basicurl = window.createObjectURL(file);} else if (window.URL != undefined) {// mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) {// webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;}

2、上传视频的标签要有poster属性,否则不能播放

 <video :src="video" controls :poster="video" v-show="!showvideo"></video>

全部代码如下

html部分

<template><div class="put_three" v-title="'填写信息'"><div class="up-box"><div class="upimg"><video :src="video" controls :poster="video" v-show="!showvideo"></video><div class="del" @click="showvideo=true;video==''" v-show="!showvideo"></div><img src="../assets/img/upvideo.png" alt v-show="showvideo" /><input type="file" accept="video/*"  @change="getvideo($event)" v-show="showvideo"/></div></div><br><br><div class="up-box"><div class="upimg"><img :src="img" alt v-show="!showimg"/><div class="del" @click="showimg=true;img==''" v-show="!showimg"></div><img src="../assets/img/upimg.png" alt v-show="showimg" /><input type="file" accept="image/*"  @change="getimg($event)" v-show="showimg"/></div></div></div>
</template>

js部分

<script>export default {name: "Put_three",data() {return {showimg: true,img: "",showvideo: true,video: ""};},created() {},mounted() {},activated() {},watch: {},methods: {getvideo(e) {let that = this;let files = e.target.files[0];var formData = new FormData();// if (!e || !window.FileReader) return; // 看支持不支持FileReaderif (files.size > 50 * 1024 * 1024) {alert("视频不能超过50M");return;}var link = that.getObjectURL(files); //获取本地视频的地址在页面显示console.log(that.getObjectURL(files));that.video = link;that.showvideo = false;},getimg(e) {let that = this;let files = e.target.files[0];if (!e || !window.FileReader) return; // 看支持不支持FileReaderif (files.size > 10 * 1024 * 1024) {alert("图片不能超过10M");return;}var img = that.getObjectURL(files); //获取本地视频的地址在页面显示that.img = img;that.showimg = false;},// 图片转成本地路径getObjectURL(file) {var url = null;// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已if (window.createObjectURL != undefined) {// basicurl = window.createObjectURL(file);} else if (window.URL != undefined) {// mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) {// webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;}}
};
</script>

css样式

<style scoped lang="scss">
@import "../common/common";.upimg {@include wh(3rem, 3rem);border: 1px dotted #ccc;margin-bottom: 0.05rem;overflow: hidden;position: relative;.del{position: absolute;right: -0.1rem;top: -0.1rem;width: 0.5rem;height: 0.5rem;background: pink;z-index: 1;}img,video {@include wh(auto, 3rem);position: absolute;display: block;top: 0;}input {display: block;width: 100%;height: 100%;opacity: 0;z-index: 10000;}
}
</style>

vue input上传视频以及图片相关推荐

vue上传录音_vue实现移动端input上传视频、音频
vue移动端input上传视频.音频,供大家参考,具体内容如下 html部分现场视频上传视频现场音频频上传音频 js部分 getVideo (ev, typer) { let taht = t ...
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
VUE+element 上传视频
VUE+element上传视频效果展示 html部分 <el-form-item label="视频上传" prop="storageurl">& ...
vant weapp 多选上传图片_使用vant组件upLoad上传视频或图片
使用vant的uploader 组件上传视频或图片, /* 预先浏览显示 */ :key="v" @click="delImg(v)" class=" ...
vue 获取上传视频的第一帧做为视频封面
上一篇文章记录了vue上传视频,接下来,需要在上传成功后截取视频第一帧做为视频封面. 截取视频第一帧具体实现如下: <template><div><div v-if=& ...
JavaScript 获取input上传视频第一帧
调用 input 控件上传视频,并截取视频第一帧图片: <template><div><input type="file" @change=" ...
JS.VUE后台上传视频，文件格式修改，nacos配置
上传视频: 到nacos修改 application配置上传视频 16: name: aboutUsVideo mimeLimit: video/* **** ...
vue 直接上传视频到阿里云oss
1.安装oss npm install ali-oss --save 2.在src下的util文件创建utils.js工具类 /*** 时间日期格式化* @param format* @returns ...
vue+elementUI同时上传视频和图片并回显
1.效果 2.数据结构;根据name或url后缀来判断是图片或者视频类型 fileList = [{name:'123.mp4',url:'123.mp4'},{name:'124.png',url: ...

vue input上传视频以及图片

图片示例

主要代码

1、把图片视频转成本地的地址在页面显示

2、上传视频的标签要有poster属性,否则不能播放

全部代码如下

html部分

js部分

css样式

vue input上传视频以及图片相关推荐

最新文章

热门文章