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;
     0;
    visibility: hidden;
}
</style>

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

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

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

最后上效果图