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) {
  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{
  width: 88px;
  height: 88px;
  margin-right: 8px;
  margin-bottom: 8px;
}

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

}

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM