问题描述
我正在Vuejs的前端使用vuetify组件.我想用文件上传创建一个用户注册表格.我可以在vuetify中使用v-text-field创建表单，但如何上传文件.使用哪个组件或任何其他替代方式.
I'm using vuetify components for front-end in Vuejs. I want to create a user registeration form with file upload. I'm able to create a form using v-text-field in vuetify but how to upload the file. Which component to use or any other alternative way.
推荐答案
Vue JS直到今天还没有文件输入功能，因此您可以调整v-text-field使其像图像输入字段一样工作.概念是创建一个文件输入字段，然后使用CSS将其隐藏，然后在v-text-field中添加一个事件以触发该特定文件输入字段以上传图像.我已经附上了代码片段，请务必使用它，我也确实使用vue和vuetify创建了一个小提琴，请访问此处.谢谢！
Vue JS do not have file-input feature till today, so you can tweak v-text-field to work like image input field. The concept is, create an file input field and then hide it using css, and add an event in v-text-field to trigger that specific file input field to upload image. I have attached snippet please do play with that, and I also do have a fiddle created using vue and vuetify, visit here. Thanks!
new Vue({
el: '#app',
data: () => ({
title: "Image Upload",
dialog: false,
imageName: '',
imageUrl: '',
imageFile: ''
}),
methods: {
pickFile() {
this.$refs.image.click()
},
onFilePicked(e) {
const files = e.target.files
if (files[0] !== undefined) {
this.imageName = files[0].name
if (this.imageName.lastIndexOf('.') <= 0) {
return
}
const fr = new FileReader()
fr.readAsDataURL(files[0])
fr.addEventListener('load', () => {
this.imageUrl = fr.result
this.imageFile = files[0] // this is an image file that can be sent to server...
})
} else {
this.imageName = ''
this.imageFile = ''
this.imageUrl = ''
}
}
}
})<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>
<v-content>
<v-container fluid>
<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
<img :src="imageUrl" height="150" v-if="imageUrl"/>
<v-text-field label="Select Image" @click='pickFile' v-model='imageName' prepend-icon='attach_file'></v-text-field>
<input
type="file"
style="display: none"
ref="image"
accept="image/*"
@change="onFilePicked"
>
</v-flex>
<v-dialog v-model="dialog" max-width="290">
<v-card>
<v-card-title class="headline">Hello World!</v-card-title>
<v-card-text>
Image Upload Script in VUE JS
<hr>
Yubaraj Shrestha
<br>http://yubarajshrestha.com.np/
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-container>
</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>最新版本(V2.0.5)在编辑此日期为2019年8月11日的帖子时，有一个专用的文件输入选项.请点击以下链接获取官方文档: https://vuetifyjs.com/en/components/file -输入.
Latest version (V2.0.5) while editing this post dated Aug 11, 2019, there's a dedicated file input option. Please follow the link below for official documentation: https://vuetifyjs.com/en/components/file-inputs.
这篇关于在Vuetify中上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！