1

我正在使用 Dropzone npm 包开发 React 应用程序，它允许用户选择多个文件。我需要将这些文件作为 multipart/form-data 发送到我的 Web 服务。

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

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

任何输入将不胜感激。

4

1 回答 1

2

我没有表格来发布数据

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

<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) {
  //...
});

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

也就是说，您需要做的就是将事件侦听器添加到 dropzone 对象并执行需要执行的操作。

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

于 2018-11-20T07:51:51.493 回答