Estoy usando Vue.js y Axios.
Tengo dos entradas en mi página html para seleccionar una imagen. También hay un formulario. Las dos entradas y el formulario son separados e independientes.
Cuando selecciono una imagen, la imagen se carga automáticamente en el servidor.
El desafío es cómo hacer que sea imposible enviar el formulario hasta que se seleccione al menos una imagen.
¿Dime cómo hacer esto?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Add Item</title> <script src="https://unpkg.com/vue@next"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <form name="addItem" method="post" action="/user/addItem"> <label for="name">name</label> <input type="text" id="name"> <button type="submit" id="submit">Save Item</button> </form> <form @submit.prevent enctype="multipart/form-data"> <input type="file" ref="file1" @change="selectFile1"> </form> <form @submit.prevent enctype="multipart/form-data"> <input type="file" ref="file2" @change="selectFile2"> </form> </div> <script> const addProduct = { name: "addProduct", data() { return{ file1: "", image1:"", file2: "", image2: "", } }, methods:{ async selectFile1(){ const formData = new FormData(); this.file1 = this.$refs.file1.files[0]; formData.append('file', this.file1); await axios.post('/user/uploadImage', formData) }, async selectFile2(){ const formData = new FormData(); this.file2 = this.$refs.file2.files[0]; formData.append('file', this.file2); await axios.post('/user/uploadImage', formData) } } } Vue.createApp(addProduct).mount('#app') </script> </body> </html><form name="addItem" method="post" action="/user/addItem"> <label for="name">name</label> <input type="text" id="name"> <button type="submit" @click="submitForm" id="submit">Save Item</button> </form> <script> ... submitForm(e) { if (!this.file1 && !this.file2) e.preventDefault() } ... </script>De forma predeterminada, el botón de submit de su formulario está disabled hasta que se haya seleccionado cualquiera de los archivos.
Paso 1: plantilla HTML como
<template> <div id="app"> <form name="addItem" @submit.prevent="submit"> <div class="row"> <label for="name">Name</label> <input type="text" id="name" /> </div> <div class="row"> <input type="file" ref="file1" @change="selectFile1" /> </div> <div class="row"> <input type="file" ref="file2" @change="selectFile2" /> </div> <div class="row"> <button type="submit" id="submit" :disabled="!this.file1 && !this.file2">Save Item</button> <button type="button" @click.prevent="reset">Reset</button> </div> </form> </div> </template> Paso 2: methods como
methods: { submit() { if (!this.file1 && !this.file2) { return false; } else { const savedata = { name: this.name, }; axios.post("/user/addItem", savedata); } }, async selectFile1() { const formData = new FormData(); this.file1 = this.$refs.file1.files[0]; formData.append("file", this.file1); await axios.post("/user/uploadImage", formData, { headers: { "Content-Type": "multipart/form-data" }, }); }, async selectFile2() { const formData = new FormData(); this.file2 = this.$refs.file2.files[0]; formData.append("file", this.file2); await axios.post("/user/uploadImage", formData, { headers: { "Content-Type": "multipart/form-data" }, }); }, reset() { this.name = ""; this.$refs.file1.value = null; this.$refs.file2.value = null; this.file1 = ""; this.file2 = ""; }, },