javascript - steps - vuetify temporary

Carga de archivos en vuetify

Question

Estoy usando componentes vuetify para front-end en Vuejs. Quiero crear un formulario de registro de usuarios con carga de archivos. Puedo crear un formulario usando v-text-field en vuetify pero cómo cargar el archivo. Qué componente utilizar o cualquier otra forma alternativa.

Answer 1

Esto es algo que agregaremos en el futuro, pero no actualmente. Existe una discusión sobre github con varios usuarios que publican sus implementaciones que están utilizando por el momento, https://github.com/vuetifyjs/vuetify/issues/238

Answer 2

Un truco fácil es:

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

Parece una broma pero funciona.

Basta con poner una entrada con las propiedades de foloow.

• tipo = archivo
• ref = inputUpload (esto funciona como un id, puedes nombrarlo como quieras)
• v-show = false (esto oculta la entrada)

Luego haga un botón que al hacer clic haga clic en el botón de carga Subir

Answer 3

Vue JS no tiene la función de entrada de archivos hasta hoy, por lo que puede ajustar el campo de texto v para que funcione como el campo de entrada de imagen. El concepto es crear un campo de entrada de archivo y luego ocultarlo usando css, y agregar un evento en el campo de texto v para activar ese campo de entrada de archivo específico para cargar la imagen. He adjuntado un fragmento de código, por favor, juegue con eso, y también tengo un violín creado usando vue y vuetify, visite here . ¡Gracias!

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>