今天无聊地写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事件，这样就有一个错觉，你懂吧，我懒得说了...自己看代码把
最后上效果图