视图层

   <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