问题
在某些情况下element的Upload上传组件并不适用,而HTML的input标签按钮样式又不好看。所以希望用element-ui按钮替换input type=“file” 默认按钮。
解决办法
先隐藏input的默认按钮,再把el-button的点击事件指向input的点击事件。代码如下:
<form name="form1">
<input type="file"
id="uploads"
:value="imgFile"
style="position:absolute; clip:rect(0 0 0 0);" //隐藏按钮
accept="image/png, image/jpeg, image/gif, image/jpg"
@change="uploadImg($event, 1)">
<el-button size="small" type="primary" plain icon="el-icon-upload2" onclick="document.form1.uploads.click()">更换头像</el-button>
</form>