Upload de fichier dans vuetify
Je suis en utilisant vuetify composants pour le front-end dans Vuejs. Je veux créer un utilisateur internet forme avec upload de fichier. Je suis en mesure de créer un formulaire à l'aide de v-text-field
dans vuetify mais comment faire pour télécharger le fichier. Le composant d'utiliser ou de toute autre façon alternative.
- Vous pouvez simplement utiliser AJAX requête post pour télécharger le formulaire.
- Je veux upload de fichier dans vuetify comment faire, comme le téléchargement d'images
Vous devez vous connecter pour publier un commentaire.
Vue JS n'avez pas de fichier de fonction entrée jusqu'à aujourd'hui, de sorte que vous pouvez ajuster v-texte-champ à travailler comme image champ de saisie. Le concept est de créer un fichier de champ de saisie, puis de les masquer à l'aide de css, et ajouter un événement dans v-le champ texte pour déclencher ce fichier spécifique champ de saisie de télécharger l'image. J'ai joint l'extrait de code s'il vous plaît ne jouer avec, et je fais aussi de disposer d'un violon créé à l'aide de vue et vuetify, visite ici. Merci!
JS:
HTML:
Dernière version (V2.0.5) lors de l'édition de ce post, daté du 11 Août, en 2019, il y a un fichier dédié d'entrée de l'option. Veuillez suivre le lien ci-dessous pour la documentation officielle: https://vuetifyjs.com/en/components/file-inputs.
@change="onFilePicked"
événement ne semble pas le feu après le téléchargement d'un document et laisse lav-text-field
pour le fichier vide. Quelqu'un a vu un comportement similaire?C'est quelque chose que nous allons ajouter dans le futur, mais pas pour le moment. Il y a une discussion sur github avec plusieurs utilisateurs de poster leurs implémentations qu'ils utilisent pour le moment, https://github.com/vuetifyjs/vuetify/issues/238
Un truc facile est:
Il suffit de créer une entrée avec les propriétés suivantes:
type=file
ref=inputUpload
, cela fonctionne comme un identifiant, vous pouvez le nommer comme vous voulezv-show=false
ce masque de saisieEnsuite faire un bouton qui, lorsque vous cliquez dessus, il déclenche un événement de clic sur l'entrée Bouton de Téléchargement.
@click
sur lebtn
doit être ceci:$refs.inputUpload.$el.click()
juste besoin de$el
et il fonctionne comme un champion!De bonnes nouvelles.
À partir de la version 2.0.0.-la bêta.8
v-fichier-input
est disponible dans Vuetify. Vous êtes censé l'utiliser comme:MODIFIER (EXTRAIT DE L'ADDITION):
Une utilisation de base pour la manipulation d'un fichier image peut être mise en œuvre comme suit:
JS:
HTML:
v-model
attribut dev-file-input
. J'ai ajouté un exemple de journalisation le fichier, vous pouvez l'envoyer au serveur ot que ce soit à la place.