在 vuetify 中上传文件
File upload in vuetify
我在 Vue.js 中为我的前端使用 Vuetify.js 组件,并想创建一个带有文件上传的用户注册表。我可以使用 v-text-field
(Vuetify 组件)创建表单。
- 如何上传选定(输入)的文件?
- 我应该使用哪个组件或有其他替代方法吗?
这是我们将来会添加的内容,但目前不会。 github 上有几个用户发布了他们目前正在使用的实现,https://github.com/vuetifyjs/vuetify/issues/238
进行了讨论
Vue JS 直到今天还没有文件输入功能,因此您可以调整 v-text-field 使其像图像输入字段一样工作。这个概念是,创建一个文件输入字段,然后使用 css 隐藏它,并在 v-text-field 中添加一个事件来触发特定文件输入字段上传图像。我附上了代码片段,请尝试一下,我也有一个使用 vue 和 vuetify 创建的 fiddle,请访问 here。谢谢!
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) 在编辑此 post 日期为 2019 年 8 月 11 日时,有一个专用的文件输入选项。请按照下面的link获取官方文档:https://vuetifyjs.com/en/components/file-inputs.
一个简单的技巧是:
<v-btn color="success" @click="$refs.inputUpload.click()">Success</v-btn>
<input v-show="false" ref="inputUpload" type="file" @change="yourFunction" >
只需创建一个具有以下属性的输入:
type=file
ref=inputUpload
这就像一个 id,你可以随意命名它
v-show=false
这会隐藏输入
然后制作一个按钮,当您单击它时,它会在输入上传按钮上触发单击事件。
好消息。
从版本 2.0.0.-beta.8 v-file-input
开始,Vuetify 可用。你应该像这样使用它:
<template>
<v-file-input accept=".txt" label="Select File..."></v-file-input>
</template>
编辑(片段添加):
处理图像文件的基本用法如下。
感谢 @Begueradj 指出甚至不需要处理 @change
事件来跟踪文件更改并使示例更加精确:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
file: null,
imageUrl: null
}),
methods: {
onUpload() {
console.log(this.file)
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-file-input
v-model="file"
label="Select Image File..."
accept="image/*"
></v-file-input>
<v-btn color="primary" @click="onUpload">Upload</v-btn>
</v-container>
</v-content>
</v-app>
</div>
我在 Vue.js 中为我的前端使用 Vuetify.js 组件,并想创建一个带有文件上传的用户注册表。我可以使用 v-text-field
(Vuetify 组件)创建表单。
- 如何上传选定(输入)的文件?
- 我应该使用哪个组件或有其他替代方法吗?
这是我们将来会添加的内容,但目前不会。 github 上有几个用户发布了他们目前正在使用的实现,https://github.com/vuetifyjs/vuetify/issues/238
进行了讨论Vue JS 直到今天还没有文件输入功能,因此您可以调整 v-text-field 使其像图像输入字段一样工作。这个概念是,创建一个文件输入字段,然后使用 css 隐藏它,并在 v-text-field 中添加一个事件来触发特定文件输入字段上传图像。我附上了代码片段,请尝试一下,我也有一个使用 vue 和 vuetify 创建的 fiddle,请访问 here。谢谢!
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) 在编辑此 post 日期为 2019 年 8 月 11 日时,有一个专用的文件输入选项。请按照下面的link获取官方文档:https://vuetifyjs.com/en/components/file-inputs.
一个简单的技巧是:
<v-btn color="success" @click="$refs.inputUpload.click()">Success</v-btn>
<input v-show="false" ref="inputUpload" type="file" @change="yourFunction" >
只需创建一个具有以下属性的输入:
type=file
ref=inputUpload
这就像一个 id,你可以随意命名它v-show=false
这会隐藏输入
然后制作一个按钮,当您单击它时,它会在输入上传按钮上触发单击事件。
好消息。
从版本 2.0.0.-beta.8 v-file-input
开始,Vuetify 可用。你应该像这样使用它:
<template>
<v-file-input accept=".txt" label="Select File..."></v-file-input>
</template>
编辑(片段添加):
处理图像文件的基本用法如下。
感谢 @Begueradj 指出甚至不需要处理 @change
事件来跟踪文件更改并使示例更加精确:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
file: null,
imageUrl: null
}),
methods: {
onUpload() {
console.log(this.file)
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-file-input
v-model="file"
label="Select Image File..."
accept="image/*"
></v-file-input>
<v-btn color="primary" @click="onUpload">Upload</v-btn>
</v-container>
</v-content>
</v-app>
</div>