React Ant Design多个文件上传不起作用

Question

我正在通过formData.append()从“ React.js”向后端发送多个文件。

在后端（春季启动），我发现邮递员可以很好地保存多个文件。

问题发生在React中。

（我正在使用React UI库的“蚂蚁设计”。）

下面是将文件附加到formdata的源。

const formData = new FormData();
formData.append('webtoonId', this.state.selectedToonId);
formData.append('epiTitle', this.state.epiTitle);
formData.append('eFile', this.state.thumbnail[0].originFileObj);
for( let i = 0; i< this.state.mains.length ; i++){
    formData.append('mFiles', this.state.mains[i].originFileObj);
}
uploadEpi(formData)

uploadEpi（）是POST API。

以下是关于状态的信息。

this.state = {
    toons: [],
    epiTitle :'',
    thumbnail : [],
    mains : [],
    selectedToonID : ''
}

我提交时，文本和单个文件通常存储在数据库中，但是只能保存多个文件。

没有错误。只是没有保存多个文件。

状态“市电”的配置如下所示。

我猜是因为我没有正确使用Ant Design。
（蚂蚁设计：https://ant.design/components/upload/）

为什么会这样呢，因为当我将multiple属性添加到<Dragger>时，如下所示，

<Dragger onChange={this.onChangeMain} beforeUpload={() => false} multiple={true}>

状态“主要”的多个文件变成undefined。

下面是onChange={this.onChangeMain}

onChangeMain=({ fileList })=> {
    this.setState({ mains : fileList }, function(){
        console.log(this.state)
    });
}

最重要的是，我想知道如何通过“ React Ant Design”中的<Upload>（或<Dragger>）上传多个文件。

我不知道该怎么办

这是我关于这个项目的github。

谢谢您的帮助。谢谢。

Answer 1

似乎您正在覆盖mFiles的值。

 const formData = new FormData();
 formData.append('webtoonId', this.state.selectedToonId);
 formData.append('epiTitle', this.state.epiTitle);
 formData.append('eFile', this.state.thumbnail[0].originFileObj);

 let mFiles = [];

 for( let i = 0; i< this.state.mains.length ; i++){
    mFiles[i] = this.state.mains[i].originFileObj; 
 }

 formData.append('mFiles', mFiles)

 uploadEpi(formData)

Answer 2

也许这可行：formData.append('mFiles[]', mFiles) 如果将 [] 添加到字符串中，它不应覆盖而是添加到数组中