Javascript vuetify中的文件上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44989162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
File upload in vuetify
提问by praneet drolia
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-fieldin vuetify but how to upload the file. Which component to use or any other alternative way.
我在 Vuejs 中使用 vuetify 组件作为前端。我想创建一个带有文件上传的用户注册表。我可以v-text-field在 vuetify 中创建一个表单，但如何上传文件。要使用哪个组件或任何其他替代方式。
回答by Yubaraj Shrestha
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!
Vue JS 直到今天还没有文件输入功能，所以你可以调整 v-text-field 来像图像输入字段一样工作。概念是，创建一个文件输入字段，然后使用css隐藏它，并在v-text-field中添加一个事件以触发该特定文件输入字段上传图像。我附上了代码片段，请使用它，我也有一个使用 vue 和 vuetify 创建的小提琴，请访问这里。谢谢！
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>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.
最新版本 (V2.0.5) 在编辑 2019 年 8 月 11 日的帖子时，有一个专用的文件输入选项。请按照以下链接获取官方文档：https: //vuetifyjs.com/en/components/file-inputs。
回答by John Leider
This is something we will add in the future, but not currently. There is discussion on github with several users posting their implementations that they are using for the time being, https://github.com/vuetifyjs/vuetify/issues/238
这是我们将来会添加的内容，但目前不会。在 github 上有几个用户发布了他们暂时使用的实现的讨论，https://github.com/vuetifyjs/vuetify/issues/238
回答by Ing Oscar MR
An easy trick is:
一个简单的技巧是：
<v-btn color="success" @click="$refs.inputUpload.click()">Success</v-btn>
<input v-show="false" ref="inputUpload" type="file" @change="yourFunction" >
Just create an input with the following properties:
只需创建一个具有以下属性的输入：
type=fileref=inputUploadthis works like an id, you could name it like you wantv-show=falsethis hides input
type=fileref=inputUpload这就像一个 id，你可以随意命名v-show=false这隐藏了输入
Then make a button that when you click it, it fires a click event on the input Upload Button.
然后制作一个按钮，当你点击它时，它会在输入上传按钮上触发一个点击事件。
回答by vahdet
Good news.
好消息。
Starting with version 2.0.0.-beta.8v-file-inputis available in Vuetify. You're supposed to use it like:
从2.0.0.-beta.8版本开始在Vuetifyv-file-input中可用。你应该像这样使用它：
<template>
<v-file-input accept=".txt" label="Select File..."></v-file-input>
</template>
EDIT (SNIPPET ADDITION):
编辑（片段添加）：
A basic usage for handling an image file can be implemented as follows.
处理图像文件的基本用法可以实现如下。
Thanks to @Begueradjpointing there is even no need for handling @changeevent for tracking the file change and making the example even more precise:
感谢@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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>