Filepond обрабатывать все файлы одним запросом

Я использую response-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)

Ссылка на песочницу здесь.

Как я могу это реализовать?


reactjs javascript file-upload filepond
person MonteCristo    schedule 22.06.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Не используйте свойство 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`
person Rik    schedule 25.06.2019
comment
кажется ненужным отображать это ... files.forEach(item => formData.append('my-file', item.file)) - person Endless; 27.06.2019
comment
@Endless массив files - это массив файловых элементов, а не файловых объектов. Поэтому их нужно сначала сопоставить с фактическими файловыми объектами. - person Rik; 28.06.2019
comment
Endless был прав, перечитал через 2 года: D карту не нужно. - person Rik; 03.05.2021