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; }