上传多个文件/图像，获取，formData

Question

我想通过上传图片fetch()。我使用formData并成功上传，但一次只能上传一张图片。

handleGetNewPictureDragDrop = data => {

        console.log(data);

        const formData = new FormData();

        for (let i = 0; i < data.length; i++) {

            formData.append('filename', data[i]);

        }

        console.log(...formData);

        const name = this.props.nameCategory;

        fetch('http://api.../gallery/' + name, {

            method: 'POST',

            body: formData,

        })

            .then(response => response.json())

            .then(success => console.log(success))

            .catch(error => console.log(error));

    }

控制台日志（数据）：

控制台日志（...表单数据）：

控制台日志（成功）：

我拍了 3 张图片，创建formData，有 3 张图片，但在发布后formData我只上传了一张。

Answer 1

请在附加多个文件以形成数据时使用唯一键。formData.append('file'+i,&nbsp;data[i]);

Answer 2

我认为您正在传递相同的“名称”以附加到每个图像。语法应该是formData.append(name,&nbsp;value,&nbsp;filename);第一个应该是字段名，如果不是唯一的，它会覆盖。尝试让它动态&nbsp;&nbsp;for&nbsp;(let&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;data.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;formData.append(`filename_${i}`,&nbsp;data[i]); &nbsp;&nbsp;&nbsp;&nbsp;}或者可能其他东西（从您的数据中独一无二）会更好，只是不要为每个图像传递相同的名称。

Answer 3

我有一个类似的问题，但有一个 PHP 后端。唯一formData键可以工作，但我发现经典的 HTML 表示法工作得很好，只会在服务器上生成一个数组。formData.append('file[]',&nbsp;data[i]);我更喜欢它，因为我可以使用与处理经典<input type="file" multiple />.