vuetify中的文件上傳

Question

我在Vuejs中使用vuetify前端組件。我想創建用於文件上傳的用戶註冊表單。我可以使用v-text-field來創建一個表單，但是如何上傳表單。使用哪個組件或其他替代方法。

Answer 1

Vue JS直到今天還沒有文件輸入功能，所以你可以調整v-text-field來像圖像一樣工作輸入字段。這個概念是，創建一個文件輸入字段，然後使用css隱藏它，並在v-text-field中添加一個事件來觸發該特定文件輸入字段來上傳圖像。我已附上片段，請確保使用vue和vuetify創建小提琴，請訪問here。謝謝！

new Vue({ 
 
    el: '#app', 
 
    data:() => ({ 
 
     title: "Image Upload", 
 
     dialog: false, 
 
\t \t imageName: '', 
 
\t \t imageUrl: '', 
 
\t \t imageFile: '' 
 
    }), 
 

 
    methods: { 
 
     pickFile() { 
 
      this.$refs.image.click() 
 
     }, 
 
\t \t 
 
\t \t onFilePicked (e) { 
 
\t \t \t const files = e.target.files 
 
\t \t \t if(files[0] !== undefined) { 
 
\t \t \t \t this.imageName = files[0].name 
 
\t \t \t \t if(this.imageName.lastIndexOf('.') <= 0) { 
 
\t \t \t \t \t return 
 
\t \t \t \t } 
 
\t \t \t \t const fr = new FileReader() 
 
\t \t \t \t fr.readAsDataURL(files[0]) 
 
\t \t \t \t fr.addEventListener('load',() => { 
 
\t \t \t \t \t this.imageUrl = fr.result 
 
\t \t \t \t \t this.imageFile = files[0] // this is an image file that can be sent to server... 
 
\t \t \t \t }) 
 
\t \t \t } else { 
 
\t \t \t \t this.imageName = '' 
 
\t \t \t \t this.imageFile = '' 
 
\t \t \t \t this.imageUrl = '' 
 
\t \t \t } 
 
\t \t } 
 
    } 
 

 
})

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> 
 
    <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"> 
 

 
<div id="app"> 
 
    <v-app> 
 
     <v-toolbar dark color="primary"> 
 
      <v-toolbar-side-icon></v-toolbar-side-icon> 
 
      <v-toolbar-title class="white--text">{{ title }}</v-toolbar-title> 
 
      <v-spacer></v-spacer> 
 
      <v-btn icon @click="dialog = !dialog"> 
 
       <v-icon>link</v-icon> 
 
      </v-btn> 
 
     </v-toolbar> 
 
\t \t <v-content> 
 
\t \t \t <v-container fluid> 
 
\t \t \t \t <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 
 
\t \t \t \t \t <img :src="imageUrl" height="150" v-if="imageUrl"/> 
 
\t \t \t \t \t <v-text-field label="Select Image" @click='pickFile' v-model='imageName' prepend-icon='attach_file'></v-text-field> 
 
\t \t \t \t \t <input 
 
\t \t \t \t \t \t type="file" 
 
\t \t \t \t \t \t style="display: none" 
 
\t \t \t \t \t \t ref="image" 
 
\t \t \t \t \t \t accept="image/*" 
 
\t \t \t \t \t \t @change="onFilePicked" 
 
\t \t \t \t \t > 
 
\t \t \t \t </v-flex> 
 
\t \t \t \t <v-dialog v-model="dialog" max-width="290"> 
 
\t \t \t \t \t <v-card> 
 
\t \t \t \t \t \t <v-card-title class="headline">Hello World!</v-card-title> 
 
\t \t \t \t \t \t <v-card-text>Image Upload Script in VUE JS 
 
\t \t \t \t \t \t \t <hr>Yubaraj Shrestha 
 
\t \t \t \t \t \t \t <br>http://yubarajshrestha.com.np/</v-card-text> 
 
\t \t \t \t \t \t <v-card-actions> 
 
\t \t \t \t \t \t \t <v-spacer></v-spacer> 
 
\t \t \t \t \t \t \t <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Close</v-btn> 
 
\t \t \t \t \t \t </v-card-actions> 
 
\t \t \t \t \t </v-card> 
 
\t \t \t \t </v-dialog> 
 
\t \t \t </v-container> 
 
\t \t </v-content> 
 
    </v-app> 
 
</div> 
 
    
 
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>

Answer 2

這是我們將來添加的內容，但目前不支持。在github上有幾個用戶發佈他們正在使用的實現的討論，https://github.com/vuetifyjs/vuetify/issues/238