Reaction Ant Design多个文件上传不起作用 [英] React Ant Design multiple files upload doesn't work

问题描述

我正在通过formData.append()将多个文件从"React.js"发送到后端。

在后台(Spring Boot)，我可以看到Postman保存了多个文件。

反应中出现问题。

(我使用的是"Ant Design"，即Reaction 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)

ploadEpi()为POST接口。

下面是关于状态的。

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

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

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

Mains状态配置如下所示。

我想这是因为我没有正确使用Ant Design。
(蚂蚁设计：https://ant.design/components/upload/)

为什么我猜是这样，因为当我像下面这样给<Dragger>添加属性时，

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

状态"主要"多个文件变为undefined。

下面是onChange={this.onChangeMain}

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

归根结底，我想知道如何通过"Reaction Ant Design"中的<Upload>(或<Dragger>)上传多个文件。

我不知道该怎么办。

这是我关于此项目的GitHub。

如果你能帮忙，我将不胜感激。谢谢。

推荐答案

const [loading, setLoading] = useState<boolean>(false);
  const [fileList, setFileList] = useState<any[]>([]);
  const [/* fileListBase64 */, setFileListBase64] = useState<any[]>([]);


const propsUpload = {
  onRemove: (file:any) => {
      const index = fileList.indexOf(file);
      const newFileList:any = fileList.slice();
      newFileList.splice(index, 1);

      return setFileList(newFileList)
  },
  beforeUpload: (file:any) => {
    setFileList([...fileList, file]); 
    return false;
  },
  onChange(info:any) {
    setLoading(true);
    const listFiles = info.fileList;
    setFileList(listFiles); 
    
    const newArrayFiles  = listFiles.map((file:any) => file.originFileObj? (file.originFileObj) : file );
    
    const anAsyncFunction = async (item:any) => {
      return convertBase64(item)
    }
    
    const getData = async () => {
      return Promise.all(newArrayFiles.map((item:any) => anAsyncFunction(item)))
    }
    
    getData().then(data => {
      /*  setFileSend(data) */
      setFileListBase64(data);
      setLoading(false);
      //    console.log(data);
    });
  },
  directory: true,
  fileList: fileList,
};

const convertBase64 = (file:File) => {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file)
    fileReader.onload = () => {
      resolve(fileReader?.result);
    }
    fileReader.onerror = (error) => {
      reject(error);
    }
  })
}

const handleDeleteListFiles = () => {
  setFileList([]);
  setFileListBase64([]);
}

这篇关于Reaction Ant Design多个文件上传不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！