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