问题标签 [react-dropzone]

我正在尝试使用 React JS 和显示缩略图的 react-dropzone库来实现拖放行为。

代码如下：

这是代码沙盒上的示例。

当我从计算机上的文件夹中拖动文件时，一切正常，但我希望能够将使用 dropzone 1 生成的缩略图拖动到 dropzone 2。但这不起作用。

知道怎么做吗？

I'm trying to implement drag and drop behaviour using React and react-beautiful-dnd library.

I want to chose some images using react-dropzone library and after choosing images I show thumbnails on the right side of the screen and after that I want to be able to drag one of those thumbnails to the left side and drop it to one of those containers.

My code is as follows:

Here is the example code on codesandbox.

The photo's are successfully added to the right side where I render the thumbnails but I cant drag one of them then to the left side.

Any idea how to solve it?

我正在使用 React Dropzone 进行文件上传。然后我生成 S3 putObject signedURL 并使用 axios 将图像发送到 S3。

它看起来像这样：

一切正常，但图像非常大。我想减少图像的宽度/高度，将其缩小，并可能在将其发送到 S3 之前降低质量。

我看了一些类似的问题，但我不知道什么是最好的 lib/ 方法。

有人可以帮我举个例子吗？

用户单击提交按钮时如何调用 axios？

无法在提交按钮上添加 onclick 事件处理程序，我应该在哪里声明调用 axios 或接受此代码中的 acceptedFiles 变量的 onClick 事件函数。

当用户删除文件时调用 useCallback，当用户删除文件时文件会自动上传。我希望在用户单击提交按钮时上传文件。

我正在使用 React-Dropzone-Uploader 将图像上传到我的 API。

API 采用请求正文：

并给出成功响应数据：

我无法做到这一点。

我正在使用 axios 进行 API 调用。

''让 image=files API.post('/web/v1.0/upload',{image}).then(response=>{ console.log(response.data) })''

API 请求的图像数据是多部分表单数据，但我只是向它提供图像数据。我想将图像数据转换为 FormData。

我正在使用react-dropzone-uploader将我的图像上传到 API，但 API 需要multipart/form-data. 我无法将其转换为form-data.

这是我的代码：

我收到此错误：

401未经授权

我可以在 react dropzone 上传器中集成输入吗？基本上我从输入中得到的文件应该去 dropzone 上传器。

React 文件 Dropzone：https ://github.com/fortana-co/react-dropzone-uploader

试图弄清楚如何一起使用这两个组件。github上有一个问题，人们参考它来启动并运行它，但我无法弄清楚。它的要点是这样的：

使用那个确切的代码对我来说会抛出错误：TypeError: children is not a function

我在Code Sandbox上设置了一个简化的测试用例，它使用钩子和文件预览。我还尝试查看文档中的自定义输入，但似乎缺少一些东西才能正常工作。如果有人能指出我正确的方向，我会非常高兴。

我正在使用 react-dropzone 插件进行文件上传。我担心如何将每个文件转换为 base64：

例如：

这是我获取文件的函数：我在这里为每个文件创建例如拇指并附加到对象。但是如何添加到 item here prop like base64string: 并将保留每个文件的 base64 数据？