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.直接上代码
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事件,这样就有一个错觉,你懂吧,我懒得说了...自己看代码把
最后上效果图