ekpono
208
1
Vue

Attaching multiple image to form

Posted 5 months ago by ekpono

I have a table that contains image fields to be uploaded. obviously, it is only the url that is to be stored in the database while the main image will be sent to amazon s3. The issue is only one image is sent, so am guessing there is a mistake in my loop.

            this.isLoading = true;
            let data = {
                items: this.vendorTableRows,
            };
            for (let i = 0; i < data.items.length; i++) {
                let handle = document.querySelector('.image').files[i];
                    let formData = new FormData();
                    formData.append('file', handle);
                    axios.post('/client/vendor/uploadVendorImage', formData).then(res => {
                        this.vendorTableRows.image = res.data.data
                    });
            }

the data {} object is the object that contains my form object. the data object should contain all the image links not just only one (last one) Here is my html

                                </td>
                                <td><input type="file" class="form-control image" id="image">
                                </td>
                                <td id="delete" @click='deleteVendorRow(index)'><i class="fa fa-trash-o" style="font-size:24px"></i></td>
                            </tr>```

Please sign in or create an account to participate in this conversation.