使用多部分/表单数据在ReactJS DropZone中发送文件

我没有表格来发布数据

为什么不?如文档所示 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对象,并执行需要执行的操作。

执行反应集成的最简单形式是使用 componentDidMount() 和 componentWillUnmount() 创建和销毁DropZone对象的生命周期方法。可以在 render() 方法或,当以编程方式使用时,使用 ref .