代码:
<div class="imgboxfix">
<div class="xianimgbox" v-for="(item,inx) in dataSet[xiancout].imgs" :key="inx">
<img :src="baseurl+item.imgurl" alt="">
</div>
<div class="upimgbox" @click="upimgdom" title="上传图片"
:class="dataSet[xiancout].imgs.length>=3?'prohibit':''">
<i class="el-icon-upload2"></i>
</div>
<input type="file" ref="imgfile" style="display:none" @change="setimg">
</div>
// js部分
// 点击外层盒子触发file的点击事件也就是change事件
upimgdom () {
if(this.dataSet[this.xiancout].imgs.length>=3){
this.$message.warning('最多只能上传三张图片')
}else{
this.$refs.imgfile.click()
}
},
setimg (e) {
// console.log(e.target.files[0], e.dataTransfer.files[0])
let file = e.target.files[0] || e.dataTransfer.files[0]
let formData = new FormData()
formData.append('contents', file)
formData.append('type', 'logo')
upimgs(formData)
.then(res => {
if (res.data.code == 0) {
let newobj = {}
newobj['imgurl'] = res.data.data
newobj['imgtype'] = false
this.dataSet[this.xiancout].imgs.push(newobj)
this.$refs.imgfile.value = ''
}else{
this.$message.error('图片上传错误')
}
})
}