上传多个文件/图像，获取，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, data[i]);

Answer 2

我认为您正在传递相同的“名称”以附加到每个图像。语法应该是

formData.append(name, value, filename);

第一个应该是字段名，如果不是唯一的，它会覆盖。

尝试让它动态

  for (let i = 0; i < data.length; i++) {
        formData.append(`filename_${i}`, data[i]);
    }

或者可能其他东西（从您的数据中独一无二）会更好，只是不要为每个图像传递相同的名称。

Answer 3

我有一个类似的问题，但有一个 PHP 后端。唯一formData键可以工作，但我发现经典的 HTML 表示法工作得很好，只会在服务器上生成一个数组。

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

我更喜欢它，因为我可以使用与处理经典<input type="file" multiple />.