Laravel：使用multipart-form-data发送值时为foreach（）提供的参数无效

Question

I'm trying to access an array on a multipart-form-data request.

On my js code I add to the formData the object that I need this way:

for (const key in property) {
    if (typeof property[key] !== 'undefined') {
        console.log(key, property[key]);
        formData.append(`property[${key}]`, property[key]);
    }
}

The property has the array images and the value is an array like this:

Also in the same forData I send all the data from the images that I want to handle, and in this case the property contains an array of objects that are images previously stored in the database. So, in my controller I have to following

 // Images that are already in database
 $propertyData = $request->input('property');
 $images = isset($propertyData['images'])? $propertyData['images'] : []
 foreach($images as $i) {
    $image = Image::find((int)$i['id']);
    if ( !is_null($image) ) {
        $image->update($i);
    }
}

But I got the error: Invalid argument supplied for foreach()

I've tried to even convert each image on the javascript code to an array like the property, but i got the same error.

Answer 1

You cannot directly append objects or arrays to FormData. You must add the keys and values one by one.

A way to do that is like so:

var formData = new FormData;
var arr = ['this', 'is', 'an', 'array'];
for (var i = 0; i < arr.length; i++) {
    formData.append('arr[]', arr[i]);
}

I use a helper function (note that this is in ES6 syntax) to do this:

export function appendFormdata(formData, data, previousKey) {
    if (data instanceof Object) {
        Object.keys(data).forEach(key => {
            const value = data[key];
            if (previousKey) {
                key = `${previousKey}[${key}]`;
            }
            if (value instanceof Object && !Array.isArray(value) && !(value instanceof File)) {
                return appendFormdata(formData, value, key);
            }
            if (Array.isArray(value)) {
                value.forEach((val, i) => {
                    return appendFormdata(formData, val, `${key}[${i}]`);
                });
            } else {
                formData.append(key, value);
            }
        });
    }
}

For more details refer: appending array to FormData and send via AJAX and Convert JS Object to form data