Отправка файлов в Reactjs Dropzone с использованием multipart / form-data - PullRequest
Новая
       37

Отправка файлов в Reactjs Dropzone с использованием multipart / form-data

0 голосов
/ 20 ноября 2018

Я работаю над приложением React, использующим пакет Dropzone npm, который позволяет пользователям выбирать несколько файлов.Мне нужно было бы отправить эти файлы как multipart / form-data в мой веб-сервис.

У меня нет формы для публикации данных, я использую запрос публикации Ajax для отправки файлов в мой WCFservice.

Я настроил WCF для приема файлов в виде потока, и я могу успешно отправлять файлы через PostMan в виде данных формы в теле.Но я просто пытаюсь выяснить, как я могу отправлять файлы Dropzone в формате multipart / form-data в приложении реагирования.

Будем благодарны за любой ввод.

1 Ответ

0 голосов
/ 20 ноября 2018

У меня нет формы для публикации данных

Почему бы и нет? Как показано в документации здесь , вам нужно создать базовую форму, такую ​​как: 

<form action="/file-upload"
  class="dropzone"
  id="my-awesome-dropzone">
  <input type="file" name="file" />
</form>

В случае, если вы создаете Dropzone программно , это уже должно присутствовать.

Имея это, отправка файлов через Ajax проста, так как все, что вам нужно сделать, это: 

//create a FormData Object
//that will care about all
//the mimetypes etc
const fd = new FormData(document.getElementById('my-awesome-dropzone'));

fetch(<url>, {
  method: 'POST',
  body: fd
}).then(function (response) {
  //...
});

как показано здесь . Невозможно использовать <form>, так как у вас нет <input type="file" />, чтобы дать пользователю возможность выбирать файлы. Невозможно использовать преимущества FormData, но поскольку это сложно и подвержено ошибкам, был введен API FormData .

Тем не менее, все, что вам нужно сделать, это добавить прослушиватель (и) событий к объекту dropzone и сделать то, что нужно сделать.

Самая простая форма для выполнения React Integratio - это использование componentDidMount() и componentWillUnmount() методов жизненного цикла для создания и уничтожения объекта dropzone. Необходимую форму можно создать в методе render() или, если используется программно, с обратным вызовом ref.

...