1、使用input透明覆蓋法

　　將input的z-index設置為1以上的數字并覆蓋到需點擊的內容上，將input的樣式opacity設置為0（即為透明度為0），這樣通過綁定在input上的change事件觸發     ----推薦

<p class="uploadImg">  <input type="file" @change="picUpload($event)" accept="image/*" /></p>

.uploadImg {  width: 100%;  height: 1.46rem;  position: relative;  input {   width: 1.46rem;   height: 100%;   z-index: 1;   opacity: 0;   position: absolute;   cursor: pointer;  }}

2、使用vue的ref參數直接操作input的點擊事件觸發

<div class="upload-btn-box">　 <Button @click="choiceImg" icon="ios-cloud-upload-outline" type="primary">點擊上傳</Button>  <input ref="filElem" type="file" class="upload-file" @change="getFile"></div>choiceImg(){  this.$refs.filElem.dispatchEvent(new MouseEvent('click')) },getFile(){  console.log("成功");}

3、使用HTML的lable機制觸發input事件

<label for="upfile" class="pTitleRight" @click="IDRecognition"><span>身份證識別</span>  <i class="iconfont"></i>  <input ref="filElem" type="file" accept="image/*" id="upfile" name="upfile" style="display: none;" @change="uploadPic"></label>IDRecognition: function() {},  //觸發事件 uploadPic: function() { console.log('dsa');}

　　lable上的for屬性綁定input的id,即可通過觸發lable上的點擊事件觸發input的change事件    ----推薦

總結

以上所述是小編給大家介紹的Vue觸發隱藏input file的方法實例詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！