[Vuejs]-I can't upload image files from .vue to my database

by

0👍

✅

this worked in sending image files as string on database, hopefully it helps other people that are having similar problems

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}
    },

0👍

this is my code

<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);
            })
  },

0👍

You are creating a FormData object but you are not sending it within your Axios request.
In order to send the file and form data, you have to append everything to FormData object.

<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>

Leave a comment