input[type=file] 的accept可接收image/、audio/、video/*的文件类型，废话不多说直接上代码
代码截图
代码
图片上传：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="s-main">
<div class="s-image-preview" v-for="(item,index) in images" :key="index">
<mark @click="removeImage(index)">×</mark>
<img :src="item.url">
</div>
<div class="s-image-submit">
<input type="file" accept="image/*" @change="upload">
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
images:[]
},
methods:{
upload(event) {
let { files } = event.target || {};
let { length } = files || [];
if (length) {
for (let i=0; i<length;i++) {
this.images.push({url:URL.createObjectURL(files[i]),
file:files[i]})
}
}
},
removeImage(index) {
this.images.splice(index,1);
}
}
})
</script>
<style>
.s-main {
width:500px;
height:500px;
}
.s-image-preview,.s-image-submit {
position:relative;
width:113px;
height:113px;
display:inline-block;
overflow:hidden;
}
mark {
position:absolute;
right:2px;
background:none;
color:#fff;
z-index: 2000;
}
img {
width:100%;
height:100%;
}
.s-image-submit {
border:2px dashed #ccc;
}
.s-image-submit:before {
position:absolute;
display:block;
width:113px;
height:113px;
line-height:113px;
text-align:center;
content:'＋';
color:#ccc;
font-size:100px;
}
input {
width:100%;
height:100%;
outline:none;
opacity:0;
}
</style>
</body>
</html>视频上传：
<img :src="item.url">修改为：<video :src="item.url"></video>
<input type="file" accept="image/*" @change="upload"> 修改为： <input type="file" accept="video/*" @change="upload">
video {
width:100%;
}以上就是我的全部代码分享
4701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
