web-dev-qa-db-fra.com

Téléchargement de fichier dans vuetify

J'utilise des composants vuetify pour front-end dans Vuejs. Je souhaite créer un formulaire d’enregistrement d’utilisateur avec téléchargement de fichier. Je suis capable de créer un formulaire en utilisant v-text-field in vuetify mais comment télécharger le fichier. Quel composant utiliser ou tout autre moyen alternatif. 

javascriptframeworksvue.jsvuetify.js
21
praneet drolia

Vue JS n'a pas de fonction de saisie de fichier jusqu'à aujourd'hui, vous pouvez donc Tweak v-text-field fonctionner comme un champ de saisie d'image. Le concept est de créer un champ de saisie de fichier, puis de le masquer à l'aide de css, et d'ajouter un événement dans v-text-field pour déclencher le chargement de l'image dans ce champ de saisie de fichier spécifique. J'ai joint snippet s'il vous plaît, jouez avec ça, et j'ai aussi un violon créé avec vue et vuetify, visitez ici . Merci!

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>

33
Yubaraj Shrestha

C'est quelque chose que nous ajouterons à l'avenir, mais pas actuellement. Il y a une discussion sur github avec plusieurs utilisateurs publiant leurs implémentations qu'ils utilisent actuellement, https://github.com/vuetifyjs/vuetify/issues/238

25
John Leider

Un truc facile, c'est:

<v-btn color="success" @click="$refs.inputUpload.click()">Success</v-btn>
<input v-show="false" ref="inputUpload" type="file" @change="yourFunction" >

ça ressemble à une blague mais ça marche.

Il suffit de mettre une entrée avec les propriétés suivantes 

  • type = fichier
  • ref = inputUpload (cela fonctionne comme un identifiant, vous pouvez le nommer comme vous voulez)
  • v-show = false (cela masque l'entrée)

Puis créez un bouton qui, lorsque vous cliquez dessus, clique sur le bouton de téléchargement 

2
humberto montejo rodriguez