视图层
<form>
<div class="filedivs">
<div class="filediv" ref="file1">
<input type="file" @change="fang" accept="image/*" name="imgUrls" value="file1">
</div>
<div class="filediv2" ref="file2">
<input type="file" @change="fang" accept="image/*" name="imgUrls" value="file2">
</div>
<div class="filediv2" ref="file3">
<input type="file" @change="fang" accept="image/*" name="imgUrls" value="file3">
</div>
<div class="filediv2" ref="file4">
<input type="file" @change="fang" accept="image/*" name="imgUrls" value="file4">
</div>
<div class="filediv2" ref="file5">
<input type="file" @change="fang" accept="image/*" name="imgUrls" value="file5">
</div>
<div class="filediv2" ref="file6">
<input type="file" @change="fang" accept="image/*" name="imgUrls" value="file6">
</div>
<div class="filediv2" ref="file7">
<input type="file" @change="fang" accept="image/*" name="imgUrls" value="file7">
</div>
<div class="filediv2" ref="file8">
<input type="file" @change="fang" accept="image/*" name="imgUrls" value="file8">
</div>
<div class="filediv2" ref="file9">
<input type="file" @change="fang" accept="image/*" name="imgUrls" value="file9">
</div>
</div>
</form>
数据层
methods:{
fang(i){
console.log(i)
var tht=this
var oFReader = new FileReader();
var file = i.path[0].files[0];
oFReader.readAsDataURL(file);
oFReader.onloadend = function(oFRevent){
var src = oFRevent.target.result;
i.path[1].style.background='url('+src+') no-repeat center center'
i.path[1].style.backgroundSize='100%'
i.path[1].nextSibling.className='filediv'
}
console.log(file)
}
}
给input外围套一个div把input宽高设为100%并且隐藏,给div一个背景图片,设置两个class名,filediv2中input给display:none;第一个input的class名设为filediv其他的为filediv2
css样式
.filedivs{
float:right;
width: 20.4vw;
}
.filediv{
width: 6vw;
height: 6vw;
border: 2px solid #4778c7;
background: url('../../assets/productCenter/jiahao.png') no-repeat center center;
display: inline-block;
margin-left: 0.5vw;
margin-bottom: 1vh;
overflow: hidden;
}
.filediv2{
width: 6vw;
height: 6vw;
border: 2px solid #4778c7;
display: inline-block;
margin-left: 0.5vw;
margin-bottom: 1vh;
overflow: hidden;
}
.filediv input{
width: 100%;
height: 100%;
opacity: 0;
}
.filediv2 input{
display: none;
}
给input一个change事件当选择完图片时触发fang事件改变input上方的div背景图并且将下一个input外层div的class名改为filediv