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()
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐