Téléchargement de fichiers dans Vuetify

Question

J'utilise les composants Vuetify.js pour mon front-end dans Vue.js et je veux créer un formulaire d'enregistrement d'utilisateur avec téléchargement de fichier. Je suis capable de créer le formulaire en utilisant v-text-field (un composant de Vuetify).

• Comment puis-je télécharger le fichier qui est sélectionné (entrée) ?
• Quel composant dois-je utiliser ou existe-t-il une autre solution ?

Answer 1

Vue JS n'a pas de fonction de saisie de fichier jusqu'à aujourd'hui, vous pouvez donc modifier v-text-field pour qu'il fonctionne comme un champ de saisie d'image. Le concept est de créer un champ d'entrée de fichier et de le cacher en utilisant css, et d'ajouter un événement dans v-text-field pour déclencher ce champ d'entrée de fichier spécifique pour télécharger l'image. J'ai joint un snippet, s'il vous plaît jouez avec cela, et j'ai également un fiddle créé à l'aide de vue et vuetify, visite 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>

Dernière version (V2.0.5) en éditant ce post daté du 11 août 2019, il y a une option de saisie de fichier dédiée. Veuillez suivre le lien ci-dessous pour la documentation officielle : https://vuetifyjs.com/en/components/file-inputs .

Answer 2

Une astuce facile :

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

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 voulez
• v-show=false ceci cache l'entrée

Créez ensuite un bouton qui, lorsque vous le cliquez, déclenche un événement de clic sur le bouton de téléchargement.

Answer 3

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

Answer 4

Bonne nouvelle.

À partir de la version 2.0.0.-beta.8 v-file-input est disponible dans Vuetify. Vous êtes censé l'utiliser comme :

<template>
  <v-file-input accept=".txt" label="Select File..."></v-file-input>
</template>

MODIFIER (AJOUT DE BRIBES) :

Une utilisation de base pour la manipulation d'un fichier image peut être implémentée comme suit.

Merci à @Begueradj en pointant, il n'y a même pas besoin de manipulation @change pour suivre le changement de fichier et rendre l'exemple encore plus précis :

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>