[Vue.js] 自訂上傳按鈕

標籤: Vue.js javascript

要在 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];              
},

 

完整程式碼: