[Vuejs]-Vue Axios upload multiple images at once

by

0👍

✅

So i fixed the issue adding a length variable to the data and set it to 0, the variable $i was returning a 1 but the image object inside the array had the value 0.

So i added a length variable and when an image get uploaded the length is 0 and when the image path is set to the object the length variable gets an addition of 1

                     axios.post('u/landing', data, config).then(response => {
                        
                            this.data.images[this.length].imageData = response.data.imagePath
                            this.length += 1
                            this.$emit("stopLoad");
                        })

That’s my way of doing this, if there is a better one i would be happy to hear it.

0👍

imageAdd(e) {     
        let i;    
        for(i = 0; i < e.length; i++){
            if (e[i].type == 'image/jpeg' || e[i].type == 'image/png')
            {
                this.data.images.push({
                    image: URL.createObjectURL(e[i]),
                    })

                    console.log(this.data.images);

                    let config = {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                  
                    const data = new FormData()
                    data.append('slidePhoto', e[i]);

                    this.$emit("load");

                        axios.post('u/landing', data, config).then(response => {
                        
                            //Here this.data.images[i] is an object
                            // Refer first line within if(){} above
                            //this.data.images[i].push({
                            //    imageData: response.data.imagePath
                            //})
                            this.data.images[i]['imageData'] = response.data.imagePath
                            this.$emit("stopLoad");
                        })
            }
            }
           
        },

Leave a comment