如何将多个数组附加到 formData()？

Question

I am using react fro front end and express for backend. Also multer, which is a third party package to handle file inputs. Now what I want is that there should be an array of objects that I could append to formData and send it via axios. However I fail to do so. I wrote the following code:

 const handleSubmit = (id, e) => {
    //formdata object to be created
    e.preventDefault()

    const formData = new FormData;

    for (var i = 0; i < dataFolder.length; i++) {
        formData.append('body[]', dataFolder[i])
    }

    for (var i = 0; i < imageArray.length; i++) {
        formData.append('image', imageArray[i])
    }
    addUpdateProduct(formData)
    handleClose()
}

addUpdateProduct(formData) is a redux action that then calls the backend route.

'DataFolder' here is an array of objects that has key value pairs such as:

 dataFolder = [ {name: 'BB cream', type: 'cream'},{name: 'Neomycin', type: 'ointment'}]

'imageArray'is also an array of images containing an array of files. When i console it in my express controller i get the following output:

The files get uploaded correctly in the files array but dataFolder does not show up the expected way. Any solutions?

Answer 1

See the description of append :

The field's value. This can be a USVString or Blob (including subclasses such as File). If none of these are specified the value is converted to a string.

{name: 'BB cream', type: 'cream'} is an object, not a string or a blob. If you convert a plain object to a string you get '[object Object]' as you can see in the data received by the server.

You could encode it as JSON to make it a string.