图片示例
主要代码
1、把图片视频转成本地的地址在页面显示
getObjectURL(file) {
var url = null;
// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL != undefined) {
// basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
// mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
// webkit or chrome
url = 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; // 看支持不支持FileReader
if (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; // 看支持不支持FileReader
if (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) {
// basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
// mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
// webkit or chrome
url = 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>