css：隐藏input file标签并触发点击上传文件事件

/* button样式来自element-ui */
.button {
    color: #fff;
    background-color: #409eff;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}
.button:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
}

.file-input-wrap {
  position: relative;
}
/* 隐藏文件选择 */
.file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  font-size: 0;
}

<div class="button file-input-wrap">
   <span>上传文件</span>
   <input
     type="file"
     class="file-input"
   />
</div>

/* 隐藏文件选择 */
.file-input {
    display: none;
}

<label
  class="button"
  for="file-input"
>
  <span>上传文件</span>
  <input
    type="file"
    class="file-input"
    id="file-input"
  />
</label>

<label class="button">
  <span>上传文件</span>
  <input
    type="file"
    class="file-input"
  />
</label>

/* 隐藏文件选择 */
.file-input {
    display: none;
}

<div
  class="button"
  id="file-input-btn"
>
  <span>上传文件</span>
</div>
<input
  type="file"
  class="file-input"
  id="file-input-common"
/>
<script>
  // 监听按钮点击事件
  document
    .querySelector('#file-input-btn')
    .addEventListener('click', function () {
      // 主动触发文件上传点击事件
      document.querySelector('#file-input-common').click()
    })
</script>