FilePond：使用 FormData 在单个请求中处理所有文件

如何解决FilePond：使用 FormData 在单个请求中处理所有文件

我搜索并找到了在单个请求中发送多个文件的引用，但是当删除服务器道具并将我的文件数组映射到文件对象，并将 FormData 对象发送到服务器时，我不确定我可以在哪里制作对服务器的调用。没有 server 属性就不会调用 Onprocessfiles。

通过@rikschennink 引用此评论

不要使用服务器属性。您可以将文件数组映射到文件 对象，files.map(item => item.file)，然后将文件项传递给 一个 FormData 对象并将 formData 对象发送到服务器。

const formData = new FormData();
files.map(item => item.file).forEach(file => formData.append('my-file',file))

// send formData to server with `fetch` or `XMLHttpRequest`

然而，没有服务器，onprocessfiles 不会触发，正如 @rikschennink 在这里所说的

对于没有服务器属性的配置，onprocessfiles 不会被调用，只有在处理文件时才会调用。

所以我的问题是如何在处理完所有文件后发送获取请求？

const [files,setFiles] = useState([]);

const uploadFiles = () => {
  const formData = new FormData();
  files.map((item) => item.file).forEach((file) => formData.append("FilePond",file));
        
  axios.post('/api/bsp/upload',formData)
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.log(error);
    });
};

<FilePond
  files={files}
  allowMultiple={true}
  onupdatefiles={setFiles}
  labelIdle='Drag & drop your files or <span class="filepond--label-action">browse</span>'
  onprocessfiles={() => uploadFiles()}
/>