React中FormData无法附加文件的问题咨询

我正在开发一个支持用户上传文件的React组件，文件被管理在一个state数组中，每个文件都带有额外的元数据，比如唯一的id（DataGrid所需）和docType字段（例如INVOICE）。

状态定义 #

export interface EnrichedFile {
  id: string; // Unique ID for each file (required for DataGrid)
  docType: string; // A description of the file, e.g., INVOICE
  file: File; // The actual file object
}

const [selectedFiles, setSelectedFiles] = useState<EnrichedFile[]>([]);

组件代码 #

以下是组件中用户可通过拖放或浏览选择文件上传的相关代码片段：

return (
  <Box component="div" className="w-96 overflow-hidden">
     .....
  </Box>
    {selectedFiles.length !== 0 && (
      <Animated className="w-full mt-4 h-48" animationIn="fadeInUp" animationOut="fadeOut" isVisible={true}>
        <ExDataGrid
          processRowUpdate={updateRowHandler}
          disableColumnMenu
          disableColumnFilter
          disableDensitySelector
          columnHeaderHeight={36}
          slots={{
            footer: () => (
              <div className="flex justify-center">
                <LoadingButton onClick={uploadHandler} variant="contained" color="primary" loading={isPending}>
                  Upload
                </LoadingButton>
              </div>
            ),
          }}
          columns={columnsDocumentsUpload(deleteFileUpload)}
          rows={selectedFiles}
        />
      </Animated>
    )}
  </Box>
);

上传流程与问题 #

当我点击Upload按钮时，会创建一个FormData对象，尝试附加文件和元数据后通过Axios发送到服务器，但检查时发现FormData是空的。

我的uploadHandler函数如下：

const uploadHandler = useCallback(async () => {
  // Validate that all files have a docType
  const hasError = selectedFiles.some(file => file.docType.trim() === '');
  if (hasError) {
    return toast.error('Please select a document type for all files');
  }

  // Create FormData object
  const formData = new FormData();
  selectedFiles.forEach(file => {
    if (file.file instanceof File) {
      formData.append('files', file.file); // Append the actual file
      formData.append('metadata', JSON.stringify({ id: file.id, docType: file.docType })); // Include metadata for each file
    } else {
      console.error("Invalid file object:", file.file);
    }
  });

  // Debugging: Log FormData entries
  for (const [key, value] of formData.entries()) {
    console.log(`${key}:`, value);
  }

  mutate(formData);
}, [selectedFiles, mutate]);

预期行为 #

FormData对象应包含附加的文件（files）和元数据（id、docType），并成功发送到服务器。

疑问 #

• 为什么明明selectedFiles包含有效的File对象，FormData却为空？
• 我附加文件到FormData的方式是否有误？

备注：内容来源于stack exchange，提问作者Roni Jack Vituli