问题标签 [react-dropzone]

我正在尝试使用本机Fetch和FormData API 一次将多个文件上传到服务器，但我一辈子都无法让它工作。这是我所拥有的：

但是我的 Rails 服务器收到的是这样的：

换句话说，它看起来files实际上只是一个文件。但是文档FormData说 append 应该附加多个文件。

那么出了什么问题呢？

处理组件的文档上传部分。用户可以拖放他们的文件以上传，在拖放区域下方是提交、取消按钮以及他们将要提交的文件列表。取消按钮应该清除files数组。

但是，第一次单击时，由于文件仍然存在，它仍然会打印出文件名。再次单击它，它会删除文件。不知道为什么会这样。

有问题的功能是handleClick(event).

有趣的是，它确实清除了页面上正在呈现的文件列表，但该数组仍然显示console.log为handleClick(event).

一切似乎都很顺利，直到我在服务器端包含图像集合。在那之后，流星没有启动。

commons.js

服务器.js

一段时间以来一直在努力解决这个问题，并且确实需要解决它。

我react-dropzone用来在 React-Redux 应用程序中设置文件上传。它似乎正在工作，因为它说它已成功发送到服务器，但服务器（Django REST Framework）收到的内容似乎是一个空的MultiValueDict。但是，请求有效负载具有以下内容：

所以也许前端很好，但服务器端正在发生一些事情。试图找出问题发生的确切位置。我只知道console.log(formData)似乎并不表示文件已附加在那里。

无论如何，这是我的代码：

以及相关的动作文件：

似乎服务器正在期待一个带有 的键值对file，这似乎应该是用创建的，formData.append('file', files);但在那里看不到任何类似的东西。

谢谢您的帮助！

我能够在附件字段中获取 url，但是对于 redux 表单它是空的，如何将 url 的值传递给 redux 表单？下面是代码和截图：

附件字段中的 url

第一个是使用 React Dropzone 来获取 url，但对于 Redux Form，它是空的。我可以知道如何在此处获取 Redux Form 的 url 插入吗？谢谢

我正在尝试将文件夹内容上传到 firebase，但遇到了一些错误。

我正在使用react-dropzone像这样：

在我的“handleDrop”函数中；

onDrop(acceptedFiles,rejectedFiles) { acceptedFiles.forEach(file => { var storageRef = firebase.storage(); var fileRef = storageRef.ref(file.name); fileRef.put(file) .then(function (snapshot) { console.log('上传了一个 blob 或文件！'); }) .catch((e) => { }); }); }

我收到错误'net :: ERR_FILE_NOT_FOUND'，直到firebase错误出现最大重试次数。

我最初认为这是react-redux, axios,lodash和/或react-dropzone;的问题。但是，文件上传正常，但仍会触发此错误。（即使在控制台中显示“失败”，文件也会被发布到服务器）。

react-router-redux根据我在此处阅读的内容，我开始认为该问题可能与以下内容有关：

https://github.com/reactjs/react-router-redux/issues/182

但是，这些建议对我不起作用。

无论如何，我得到一个Uncaught TypeError: Cannot read property 'type' of undefined我无法真正说出导致它的原因或如何解决它的问题。以下是一些错误截图：

所以这里应该是相关的react-router。只是不确定发生了什么。

入口点：

全局减速器和那些与触发错误的操作有关的减速器。

最后，引发错误时调用的操作。需要指出的一件重要事情：当 the 不在时不会发生错误axios.post（_.map实际上是任何类型的数组迭代）。但是，这只会发送一个文件，这不是我所追求的行为。

调用该操作的容器也可能会有所帮助：

另外，因为webpack在错误中提到，这里是它的配​​置：

无论如何，不​​确定是什么原因造成的，并且已经尝试解决了几天。否则一切正常，只是看起来不专业。

只是想获得一个预览缩略图图像来渲染onDrop()。我在几个网站上看到了一些你放置文档的网站，它显示了第一页的缩略图。我要么得到一个损坏的链接图像，要么根本没有图像。

这是我用作参考的内容，尽管官方文档并没有太大帮助：

https://react-dropzone.js.org/

React-Dropzone 图像预览未显示

https://medium.com/technoetics/handling-file-upload-in-reactjs-b9b95068f6b

这是我目前正在使用的代码。这不会呈现缩略图，但“提交”和“取消”按钮会向下移动，就像那里有东西一样，但我什么也没看到。

现在更改为以下导致损坏的图像图标：

事情正在上传。

我在这里做错了什么？我觉得我的解释preview可能与文档的含义不同，或者它仅适用于图像文件，而我的应该适用于.pdf, .xlsx., .txt.

编辑

这就是它的console.log(filesToBeSent)样子。

这是i之后的样子lodash _.map(filesToBeSent, i => {}。

我已经构建了一个 React 前端以及一个仅支持 Rails API 的后端。我想允许用户创建任务并输入标题、描述并上传图片。

因此，我尝试使用 DropZone 访问图像，然后使用 Axios 通过发布请求将图像信息以及标题和描述发送到我的 Rails API。

我在 Rails API 上设置了 Carrierwave，希望在根据发布请求将我的任务添加到数据库后上传到 AWS S3 存储桶。

这些都不起作用，所以我的问题是，我应该在反应端处理上传到 AWS 的图像吗？如果是，我如何将该图像与我保存到 Rails 数据库的附加信息（标题和描述）相关联）。

谢谢！

我正在尝试制作一个符合 ADA 的表单，它需要在几个 dropzone 字段上进行选项卡，这些字段除了可点击之外还需要使用 onKeyDown 事件处理程序。

我尝试将 onkeydown 添加到 dropzoneJsConfig 中，如下所示：

但这似乎不起作用。

我将 tabIndex 添加到包含 Dropzone 元素的 div 中：

请帮忙！