使用element-ui按钮替换input type=“file“ 默认按钮

问题

在某些情况下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>