vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]

今天无聊地写vuecli3听歌的时候，遇到了上传文件到Django的自我需求，然后就到vuetify的表单组件里找upload btn，发现居然没有！！！

顿时惊了个呆，要知道之前用element做操作系统课设的时候，还是挺全的。

这里偷偷吐槽，vuetify的alert真的丑......

这里分享一个解决办法，挺简单的，网上好多办法都模棱两可，而且还有外国友人在npm发布了一个组件，名字我忘了，巨无敌难用。

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

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

1.直接上代码

 <template>
     <v-container>
         <v-layout>
             <v-flex>
                 <v-btn @click="upload" depressed>
                     Upload Image
 7                 </v-btn>
                 <input type="file" id="upload" ref="upload" @change="changeimg" accept=".jpg, .jpeg, .png">
             </v-flex>
         </v-layout>
     </v-container>
 </template>

 <script>
 import myService from '@/services/myService'

 export default {
     components: {
     },
     data () {
       return {
       }
     },
     methods: {
         upload () {
             let uploadbtn = this.$refs.upload
             uploadbtn.click()
         },
         async changeimg (e) {
             let formData=new FormData()
             formData.append('file', e.target.files[0])
             await myServiece.fun(formData)
             console.log('send')
         }
     }
   }
 </script>

 <style scoped>
 #upload{
     height: 0;
     width: 0;
     visibility: hidden;
 }
 </style>

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

算了，我还是简单说一下吧....就是创建两个btn，第一个是好看的vuetify的，另一个是html原生的input（类型是file），然后把第二个用vue的ref记录下来，以便后面调用，并且用css隐藏起来。

给第一个btn绑定upload方法，当点击时，调用第二个btn的click事件，这样就有一个错觉，你懂吧，我懒得说了...自己看代码把

最后上效果图