[Vue.js] 自訂上傳按鈕

要在 Vue.js 裡客製化上傳按鈕的選單可以像這樣做，首先我們準備一個按鈕設定好樣式，另外準備上傳的按鈕並把它隱藏。

這邊我用 bootstrap 的 UI：

<button class="btn btn-info" >upload</button>
<input type="file" class="d-none" >

接著在原本的上傳按鈕設定 ref="file"，並在自訂的按鈕上設定點擊事件觸發上傳按鈕 @click="$refs.file.click()"

<button class="btn btn-info" @click="$refs.file.click()">upload</button>
<input ref="file" type="file" class="d-none" >

如果要處理選擇的檔案的資訊，可以偵測 change 後的 file：

<button class="btn btn-info" @click="$refs.file.click()">upload</button>
<input ref="file" type="file" class="d-none" v-on:change="handleFileUpload()">

js 的部分：

handleFileUpload: function () {
  this.file = this.$refs.file.files[0];              
},

完整程式碼：