使用multipart / form-data在Reactjs Dropzone中发送文件

Question

我正在使用Dropzone npm软件包在React应用程序上工作，该软件包允许用户选择多个文件。 我需要将这些文件作为多部分/表单数据发送到我的Web服务。

我没有Form来发布数据，我正在使用Ajax发布请求将文件发送到WCF服务。

我已将WCF配置为以流形式接收文件，并且可以通过PostMan作为正文中的表单数据成功发送文件。 但是只是想弄清楚如何在react应用程序中将我的Dropzone文件作为multipart / form-data发送。

任何输入将不胜感激。

Answer 1

我没有表格来发布数据

为什么不？ 由于在文档显示在这里 ，你需要创建一个基本形式，如：

<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优势，但是由于这很复杂且容易出错，因此引入了FormData API 。

就是说，您要做的就是将事件侦听器添加到dropzone对象，然后执行需要做的事情。

执行React Integratio的最简单形式是使用componentDidMount()和componentWillUnmount()生命周期方法来创建和销毁dropzone对象。 可以在render()方法中创建所需的表单，或者在以编程方式使用ref的回调时创建所需的表单。