Filepond 在一个请求中处理所有文件答案

【问题标题】：Filepond process all files in one requestFilepond 在一个请求中处理所有文件
【发布时间】：2019-06-26 02:23:15
【问题描述】：

我正在使用 react-filepond 来处理多个文件。我需要在一个请求中将所有文件一起发送到 API，而不是每个文件多个请求：

// Import the Image EXIF Orientation and Image Preview plugins
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'

// Register the plugins
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview)

function App() {
  console.log('TEST');
  const [files, setFiles] = useState([])
  console.log(files);
  return (
    <div className="App">
      <FilePond
        server='/api'
        files={files}
        allowMultiple={true}
        onupdatefiles={setFiles}
        labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
      />
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

沙盒链接here。

我该如何实现？

【问题讨论】：

标签： javascript reactjs file-upload filepond

【解决方案1】：

不要使用server 属性。您可以将files 数组映射到文件对象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`

【讨论】：

似乎没有必要映射它...files.forEach(item => formData.append('my-file', item.file))
@Endless files 数组是文件项数组，而不是文件对象。因此，它们需要首先映射到实际的文件对象。
Endless 是对的，2 年后重读：D 不需要映射。