Vue Vant Uploader文件上传组件

Vue Vant Uploader文件上传组件

  <div>
    <van-uploader
      v-model="fileList"
      multiple
      :max-count="1"
      :after-read="beforeRead">
      <div class="imgsrc">
       <span class="icons icon-zhaoxiangji" />
      </div>
    </van-uploader>
  </div>
  <style>
  .imgsrc {
  margin-left: 20px;
  background: #eeeeee;
  width: 82px;
  height: 69px;
}
.icon-zhaoxiangji {
  color: #cfcfcf !important;
  display: inline-block;
  font-size: 12vw !important;
  position: relative;
  top: 10px;
  left: 4.93333vw;
}
  </style>
  <script>
    methods: {
    //图片加载完成后的事件（显示图片信息）
    beforeRead(file) {
      window.console.log(file.file);
    }
    </script>

用的图标是Vant自带的icon图标

输出结果

如果想知道更多的Vant用法