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事件，這樣就有一個錯覺，你懂吧，我懶得說了...自己看代碼把

最后上效果圖