input file的样式比较丑,直接进行修改时,无法修改其中按钮的样式。
只需简单的三步就可以搞定:
第一步:
将input file进行隐藏:
#file {
display: none;
}
第二步:
添加button按钮:
<input id="file" type="file"/><br />
<input type="button" value="上传文件" class="btn"/>
第三步:
点击按钮时,调用input file的点击函数:
<input id="file" type="file"/><br />
<input type="button" value="上传文件" class="btn" @click="clickFile"/>
clickFile
函数是自定义的,只需要简单调用file的click
函数即可。
clickFile() {
const input = document.querySelector('#file')
input.click()
}