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="width: 88px;height:88px;">     <img src="../../static/img/evaluate.png" style="width: 100%;height: 100%;">   </van-uploader> </div> data() {   uploadImages:[], }; onRead(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{
  width: 88px;
  height: 88px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.image{
  width: 88px;
  height: 88px;

}

猜你喜欢

转载自www.cnblogs.com/fanqiuzhuji/p/12308371.html