Estoy usando Vue con Laravel e intenté hacer un crud simple que funciona bien con respecto a cosas como el título o la descripción de un artículo (campos de texto), pero cuando intento enviar un archivo de imagen, no funciona. Probé formData pero fue en vano.
Este es mi formulario en la plantilla, el título va a la base de datos sin problemas, si registro en la consola el archivo seleccionado, entonces muestra el archivo seleccionado correctamente pero el método addArticle no adjunta las imágenes
<form @submit.prevent="addArticle" class="container"> <label>Title</label> <input type="text" v-model="article.title" /> <label>Image</label> <input type="file" v-on:change="selectedFile" /> <button type="submit">Create</button> </form>este es mi guion
<script> export default { data() { return { fileSelected: null, article: {}, }; }, methods: { addArticle() { var formData =new FormData(); formData.append(this.article.image, this.fileSelected); axios .post("http://localhost:8000/api/articles", this.article) .then((response) => this.$router.push({ name: "ArticlesList" })) .catch((err) => console.log(err)) .finally(() => (this.loading = false)); } , selectedFile(event) { this.fileSelected = event.target.files[0]; }, }, }; </script>este es mi codigo
<input type="file" @change="onFileChange"> onFileChange(e) { this.sendphoto = e.target.files[0]; }, editUser() { var self = this; let formData = new FormData(); formData.append("image" , self.sendphoto ) let config = { header : { 'Content-Type' : 'multipart/form-data' } } axios.post('/edit-user' , formData , config) .then(function (response) { }) .catch(function (error) { console.log(error); }) },Está creando un objeto FormData pero no lo está enviando dentro de su solicitud de Axios. Para enviar el archivo y los datos del formulario, debe agregar todo al objeto FormData .
<script> export default { data() { return { fileSelected: null, article: {}, }; }, methods: { addArticle() { var formData =new FormData(); formData.append('image', this.fileSelected); formData.append('title', this.article.title); axios .post("http://localhost:8000/api/articles", formData) .then((response) => this.$router.push({ name: "ArticlesList" })) .catch((err) => console.log(err)) .finally(() => (this.loading = false)); } , selectedFile(event) { this.fileSelected = event.target.files[0]; }, }, }; </script>esto funcionó al enviar archivos de imagen como una cadena en la base de datos, espero que ayude a otras personas que tienen problemas similares
setup() { const base64 = ref() const changeFile= async(event) => { const file = event.target.files[0]; base64.value = await convertBase64(file); } const convertBase64 = (file) => { return new Promise ((resolve, reject) => { const fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.onload = () => { resolve(fileReader.result) } fileReader.onerror = (error) => { reject(error) } }) } const form = reactive({ title: " ", body: " ", image: base64, }) const submitForm = () => { axios.post("http://localhost:8000/api/articles", form) } return { changeFile, submitForm, form} },