当我尝试将多张图片上传到我的后端时，我得到的是空数组

Question

我在后端创建了一个 API 来将图像存储到数据库中，我创建了一个用于上传图像的函数，但是我得到了一个空数组到我的数据库中。

如果我喜欢这种方式，它工作正常：

<form action='http://localhost:5000/addProduct' method='post' encType='multipart/form-data'>
                <input
                    type="file"
                    name="images"
                    multiple
                    onChange={e => setImages(e.target.files)}
                    accept="image/png , image/jpeg, image/webp"
                />

                <div className=" py-3 text-right ">
                    <button type="submit" className="inline-flex justify-center py-2 px-4 border border-transparent drop-shadow-md text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Publish</button>
                </div>
            </form>

但是，如果我创建一个用于上传文件的函数，我没有采取行动，而是得到了一个空数组。在支持我收到 [object FileList]

<form onSubmit={handleUploadImages }>
<input
      type="file"
      name="images"
      onChange={setImages}
      multiple
      accept="image/png , image/jpeg, image/webp"/>
<button type="submit">Publish</button>
</form>

这是我创建的函数。问题是我想这里 formData.append('images', images.target.files)，我想我需要以不同的方式发送文件，但我很困惑我该怎么做。

    const [images, setImages] = useState<any>()
    const [data, setData] = useState()

    console.log(data);

    const handleUploadImages = (e: any) => {
        e.preventDefault()
        const formData = new FormData();
        formData.append('images', images.target.files) // problem

        fetch('http://localhost:5000/addProduct', {
            method: 'post',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                if (data.insertedId) {
                    alert('img Added')
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });

    }

Answer 1

你现在的append方法错了。您必须遍历文件并使用 images[] 键附加它。 https://developer.mozilla.org/en-US/docs/Web/API/FormData/append#example

喜欢：

const formData = new FormData();
const files = images.target.files;
for (let i = 0; i < files.length; i += 1) {
   formData.append('images[]', files[i]);
}

当我尝试将多张图片上传到我的后端时，我得到的是空数组

I am getting empty array when I try to upload multiple images to my backend

javascript

arrays

reactjs

data-structures

javascript-objects