查了好多網友的文章，有兩種方法

• 第一種是用相對定位、絕對位、overflow 配合opacity 實現

  <span class="fileinput-button ">
     <i class="fa fa-folder-open-o" aria-hidden="true"></i>
     <input type="file" multiple>
   </span>
  

  css

  .fileinput-button {
   position: relative;
   display: inline-block;
   overflow: hidden;
  }
  .fileinput-button input {
   position: absolute;
   right: 0px;
   top: 0px;
   opacity: 0;
  }
   
  

• 第二種是用label，再把input 設為透明;透明瞭還是會佔用空間 需要加個父標籤，設定寬度，超過再隱藏

  <label for="fileInput">
    <i class="fa fa-folder-open-o" aria-hidden="true"></i>
  </label>
  <input v-show="false" type="file" id="fileInput" style=" opacity: 0;">
  

• 第三種方法： 短小精幹 我喜歡 不用設定css;

  <label for="fileInput">
    <i class="fa fa-folder-open-o" aria-hidden="true"></i>
  </label>
  <input v-show="false" type="file" id="fileInput">