Vue触发input选取⽂件点击事件CSS
.upload-btn-box {
margin-bottom: 10px;
button {
margin-right: 10px;
}
input[type=file] {
display: none;
}
}
HTML
<div class="upload-btn-box">
  <Button @click="choiceImg" icon="ios-cloud-upload-outline" type="primary">点击上传</Button>
<input ref="filElem" type="file"class="upload-file" @change="getFile">
</div>
Script
choiceImg(){
this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
},
getFile(){
var that = this;
const inputFile = this.$refs.filElem.files[0];
if(inputFile){
pe !== 'image/jpeg' && pe !== 'image/png' && pe !== 'image/gif'){
alert('不是有效的图⽚⽂件！');
return;
}
this.imgInfo = Object.assign({}, this.imgInfo, {
name: inputFile.name,
size: inputFile.size,
lastModifiedDate: LocaleString()
})
const reader = new FileReader();
that.imgSrc = sult;
}
} else {inputtypefile不上传文件
return;
}
}