javascript - steps - vuetify temporary

Carga de archivos en vuetify (3)

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

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.

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

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 = '''' } } } })