vant upload图片上传 (file文件)

    
<div class="upload-img">
  <div class="img-box" v-for="(item,index) in uploadImages" :key="index">
    <img class="image" :src="item">
  </div>
  <!-- vant的upload组件 -->
  <van-uploader :after-read="onRead" accept="image/*" style=" 88px;height:88px;">
    <img src="../../static/img/evaluate.png" style=" 100%;height: 100%;">
  </van-uploader>
</div>



data() {
  uploadImages:[],
};



onRead(file) {
  console.log(file);//file文件如下图
   var formData = new FormData(); //构造一个 FormData,把后台需要发送的参数添加
  formData.append('file', file.file); //接口需要传的参数
  this.$upload('/single/single/upload', formData).then(res => {//将formDate文件上传到阿里云服务器,会返回图片地址
    console.log(res,111111);
    let str = res.response_data[0];
    this.uploadImages.push(str);//将图片地址存入一个数组中
  });
},
.upload-img{
  display: flex;
  flex-wrap: wrap;
}
.img-box{
   88px;
  height: 88px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.image{
   88px;
  height: 88px;

}

  vant upload图片上传 (file文件)