0

我的目标是创建这样的上传模块： 在此处输入图像描述

我想上传多个带有附加元数据的文件。如果文件类型是发票，我也想附上 datepicker 结果。否则只有文件和它的类型。另外，我想用按钮删除每一个。

我尝试使用以下代码来完成这项工作：https ://codesandbox.io/s/multi-upload-problem-3ofbk?file=/src/App.js

我无法将“类型”和“日期选择器”属性都附加到文件中，因为我将它们映射到另一个组件中，以便为每个输入提供不同的状态。

而不是像这样获取对象数组：

 [
  {
    File: {
        path: 'file1.jpg',
        name: 'file1.jpg',
        lastModified: '123123123',
        lastModifiedDate: '231312312',
        size: 123123123,
        type: 'image/jpeg',
    },
    type_of_file: { docTypeSelect: 'invoice' },
    date_of_file: {
        invoiceDateInput: [
            'Tue Sep 07 2021 18:05:47 GMT+0400',
            'Fri Sep 10 2021 00:00:00 GMT+0400',
        ],
    },
 },
 {
    File: {
        path: 'file2.jpg',
        name: 'file2.jpg',
        lastModified: '123123123',
        lastModifiedDate: '231312312',
        size: 123123123,
        type: 'image/jpeg',
    },
    type_of_file: { docTypeSelect: 'other' },
    date_of_file: null,
 },
 {
    File: {
        path: 'file3.jpg',
        name: 'file3.jpg',
        lastModified: '123123123',
        lastModifiedDate: '231312312',
        size: 123123123,
        type: 'image/jpeg',
    },
    type_of_file: { docTypeSelect: 'image' },
    date_of_file: null,
 },
];

一切都彼此分开记录。在将其发送到后端之前，如何解决此问题并将所有内容记录为一个数组？我的头脑完全被这个问题搞糊涂了：/提前谢谢你。

4

1 回答 1

1

我有机会点击您的代码，似乎复杂性是因为该FileList组件是从您的组件中分离出来的Dropzone，尝试合并来自这两个组件的数据有点不稳定，即使它们有重叠的数据。

如果可能的话，我会考虑将重新架构作为一个组件。这是一些关于我如何处理它的代码草案。


const App.tsx = () =>{

return <FileList onFilesChanged=((listOfAllFiles) => console.log(listOfAllFiles)) />

}


const FileList = (onFilesChanged) =>{

// regular File Objects
const [uploadedFiles, setUploadedFiles] = useState([]);

// your file metadata as a map
const [fileDetailsList, uploadedFiles] = useState({});

const onDropDownChange = (fileId, value) => {
 // add the metadata in your map
 fileDetailsList[fileId].dropdownValue = value;
}

const onFinalUpload = () => {
  const allFiles = [];
  for(const file of files){
   // get the metadata from the map
   const metadata = fileDetailsList[file.id];
   const fileDetails = {file, ...metadata}

   // push the larger object
   allFiles.push(fileDetails);
  }

  // notify the parent component with all of our merged changes
  onFilesChanged(allFiles)

}

return (
<div>
{/* React dropzone code*/}
<input type="file" onFileUpload=((file)=>setUploadedFiles(uploadedFiles.concat(file)))/>

<uploadedFiles.map((file)=>{
<p>{file.name} </p>
<dropdown onDropdownChange=(file)/>
})

<Button onClick={onFinalUpload}/>

</div>
)


}
于 2021-09-07T15:58:47.080 回答