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