今天無聊地寫vuecli3聽歌的時候，遇到了上傳檔案到Django的自我需求，然後就到vuetify的表單元件裡找upload btn，發現居然沒有！！！

頓時驚了個呆，要知道之前用element做作業系統課設的時候，還是挺全的。

這裡偷偷吐槽，vuetify的alert真的醜......

這裡分享一個解決辦法，挺簡單的，網上好多辦法都模稜兩可，而且還有外國友人在npm釋出了一個元件，名字我忘了，巨無敵難用。

So，Today I am writing to share a simple approach  to addresses this problem.

--------------------------------------------------------割--------------------------------------------------------

1.直接上程式碼

 1 <template>
 2     <v-container>
 3         <v-layout>
 4             <v-flex>
 5                 <v-btn @click="upload" depressed>
 6
 
                     Upload Image
 7                 </v-btn>
 8                 <input type="file" id="upload" ref="upload" @change="changeimg" accept=".jpg, .jpeg, .png">
 9             </v-flex>
10         </v-layout>
11     </v-container>
12 </template>
13 
14 <script>
15
 
 import myService from '@/services/myService'
16 
17 export default {
18     components: {
19     },
20     data () {
21       return {
24       }
25     },
26     methods: {
27         upload () {
28             let uploadbtn = this.$refs.upload
29             uploadbtn.click()
30         },
31         async changeimg (e) {
32             let formData=new FormData()
33             formData.append('file', e.target.files[0])
34             await myServiece.fun(formData)
35             console.log('send')
36         }
37     }
38   }
39 </script>
40 
41 <style scoped>
42 #upload{
43     height: 0;
44     width: 0;
45     visibility: hidden;
46 }
47 </style>

加油，我相信你能看懂，嘻嘻

算了，我還是簡單說一下吧....就是建立兩個btn，第一個是好看的vuetify的，另一個是html原生的input（型別是file），然後把第二個用vue的ref記錄下來，以便後面呼叫，並且用css隱藏起來。

給第一個btn繫結upload方法，當點選時，呼叫第二個btn的click事件，這樣就有一個錯覺，你懂吧，我懶得說了...自己看程式碼把

最後上效果圖