<div :class="postData.length>2?'upload-img-5':'upload-img-1'">
<div class="posting-uploader">
<span v-for="(item,nn) in postData" :key="nn">
<img :src="item.content" alt="图片" class="uploadimg">
<van-icon name="close" @click="delImg(nn)" class="delte"/>
</span>
<van-uploader :after-read="onRead" :accept="'image/*'" v-show="postData.length<=2">
<van-icon name="tianjia-" color="#999999" size="1rem" />
</van-uploader>
</div>
</div>
在data里面定义字段:
postData: [], fileIds: []
方法定义:
delImg (index) {
// 删除指定下标的图片对象
if (isNaN(index) || index >= this.postData.length) {
return false
}
let tmp = []
for (let i = 0, len = this.postData.length; i < len; i++) {
if (this.postData[i] !== this.postData[index]) {
tmp.push(this.postData[i])
}
}
this.postData = tmp
this.fileIds.splice(index,1)
},
onRead (file) { // 上传图片到图片服务器
this.postData.push(file) // postData是一个数组
var fd={
'fileType':'FILE',
'file':file.content
}
this.$http.post('/api/app/files/image', fd).then(res => {
this.fileIds.push(res) //这里上传到指定的图片服务器,成功后会返回图片的url
}).catch(err => {
alert(err)
})
}
这个插件可以直接控制最多传几张 postData.length控制