1.首先在page的data里面设置
fileList: [], newArr:[] , arr:[],
2.设置wxml
<view style="margin-top: 15px;margin-left: 10px;"> <van-uploader file-list="{{ fileList }}" preview-full-image="true" multiple="true" preview-image="true" max-count="3" bind:after-read="afterRead" bind:delete="del" /> </view>
3.请求图片上传接口
afterRead(event){ console.log(event); var img = event.detail.file; let that = this; let arr = this.data.newArr that.setData({ arr:img }) console.log(img); img.map(function(v){ let imgs = v.url; console.log(imgs); wx.uploadFile({ filePath: imgs, name: 'file', url: '你的接口', success(res){ let aa = JSON.parse(res.data) let img = aa.front_file console.log(img); arr.push({url:'接口前缀'+img}); that.setData({ fileList:arr }) console.log(that.data.fileList); console.log(that.data.newArr); } }) }) },
4.点击删除图片
del(event){ let id = event.detail.index let newArr = this.data.newArr let fileList = this.data.fileList newArr.splice(id,1) fileList.splice(id,1) console.log(this.data.fileList); this.setData({ fileList:fileList, newArr:newArr }) },