Question

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

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

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

任何输入将不胜感激。

Answer 1

我没有表格来发布数据

为什么不呢？如文档here所示，您需要创建一个基本表单，例如：

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

如果您创建Dropzone programmatically，它应该已经存在。

有了这个，通过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) {
  //...
});

，如here所示。不使用<form>是行不通的，因为您没有<input type="file" />为用户提供选择文件的机会。可能无法利用FormData的优势，但是由于这很复杂且容易出错，因此引入了FormData API。

也就是说，您要做的就是将event listener(s)添加到dropzone对象，然后执行需要做的事情。

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

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

1 个答案: