Quiero enviar texto y una imagen a un extremo de API de publicación de blog que acepte un texto (obligatorio) y una imagen (opcional). Puedo POST una nueva publicación de blog solo cuando completo un área de texto, pero no puedo enviar una imagen en el cuerpo de la POST . Aquí están los campos del formulario
<label for="comment" class="sr-only">Write what's on your mind</label> <textarea v-model="form.post" rows="3" name="comment" ></textarea> <label> <input ref="file" type="file" v-on:change="onImageUpload(e)" /> </label>En mi configuración de script
<script setup> import { ref } from "vue"; const form = ref({ post: null, file: null }); function onImageUpload() { console.log(file.value.files); // form.value.file = form.value.file[0]; // console.log("selected file", form.value); } </script>Este código devuelve el siguiente error
Error de referencia no capturado: el archivo no está definido
¿Cómo puedo acceder al archivo de imagen que se está cargando y pasarlo dentro de form.value ?
Mi forma de manejar la entrada de archivos es que recibo el archivo de onChange of the input. Y almacene el archivo como un estado en data Así es como lo implemento.
<input @change="handleFileInput" type="file" accept="image/jpeg, image/png" /> data: () => ({ file: null, }), methods: { handleFileInput(e) { this.file = e.target.files[0]; } }En su código, intentó pasar e de onChange, pero no necesita hacer esto solo para pasar el objeto de evento. Intente agregar un parámetro que acepte el objeto de evento y use ese objeto para obtener acceso a los archivos elegidos. Esto puede ser diferente de su enfoque con referencias, pero simplemente funciona.