问题标签 [react-dropzone]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1426 浏览

reactjs - react-dropzone onDrop 发射两次

所以我尝试向我的 React + Redux 应用程序添加一个非常简单的文件上传,我发现 Dropzone 是最方便的方式。这是我的设置。

我有一个FileInput组件

我在这样的页面上使用它:

(用于调试目的的console.log)

但是当我尝试删除文件时,我得到 2 个日志输出。第一个是我删除的文件,第二个 - 某种代理,可能由 react 本身提供......

控制台输出示例

我想知道如何摆脱那个代理,为什么它首先要这样做?

我试过的东西

我试图消除几个明显的问题点,但似乎没有做出任何改变。

  1. 将函数重命名为onChange其他类似的handleDrop名称并将其重写为handleDrop = (files) => {
  2. 删除构造函数(为自己分配一些东西似乎很奇怪)
0 投票
1 回答
2038 浏览

graphql - Dropzone Apollo-upload-client 使用 Upload!类型

我正在使用apollo-upload-client(所以 graphQL)并尝试使用 dropzone 将文件上传到我的服务器。

我已经成功地使用<input required onChange={({ target: { validity, files: [file] } })=> this._uploadFiles(validity, file)}了这个函数

对于 Dropzone,我有:

使用功能:

这是从每个发送的文件,它们在我看来是一样的!但它只适用于<input /> 第一个值是 using <Dropzone />,第二个值是 using <input />

在此处输入图像描述

你知道为什么我会遇到这个$file不匹配的Upload!问题吗?我在下面添加了更多代码以供参考。

0 投票
2 回答
2189 浏览

reactjs - Rest Framework 或 React 放置区的管理员,将文件上传到 firebase 时出现问题

我正在使用众所周知的 React 框架

https://marmelab.com/admin-on-rest/RestClients.html

现在我想上传一个文件到firebase,我按照文档找到了一个很棒的上传组件

FileInput(FileInput 允许使用 react-dropzone 上传一些文件。)

所以我在我的反应应用程序中使用了它,下面是我的代码

对于firebase交互,我正在使用

https://github.com/sidferreira/aor-firebase-client

当我看到我的 firebase 控制台时,我在 firebase 存储桶中看不到任何文件,但提交的值正在保存。

“blob:http://localhost:3000/8daedcb8-e526-427b-aa0c-83ff7ce9deee

为了更好的主意,我附上了 firebase 数据库和存储的快照 在此处输入图像描述 在此处输入图像描述

我是这个框架的新手,所以我知道我肯定错过了一些东西,但我仍在寻找什么。

所以请帮助我找到解决方案。

0 投票
1 回答
181 浏览

javascript - React.createElement: type 不应该是 null、undefined、boolean 或 number 错误

我正在使用 react-dropzone 在我的 react Web 应用程序中实现上传文件 dropzone,我打算向我的 .NET Core Web API 发送一个发布请求以解析文件并将其保存到数据库。我使用本教程作为指南,同时进行自己的调整以适应我的项目规范,并且我不断收到以下错误,我不确定如何修复:

警告:React.createElement:类型不应为 null、未定义、布尔值或数字。它应该是一个字符串(对于 DOM 元素)或一个 ReactClass(对于复合组件)。检查Upload.

此错误会阻止应用程序呈现组件。我研究了该错误并找到了以下答案,但我相信它们与我的问题无关。

请参阅下面的上传组件:

提前谢谢你。任何帮助是极大的赞赏。

0 投票
0 回答
313 浏览

django - 如何处理从 react-dropzone 存储为 blob 的文件

当我使用 react-dropzone 将文件添加到文件字段并将其传递给远程 Django 后端时,它会传递以下值:

. 如何使用 Django Rest API 后端将其作为上传到 S3 的文件进行处理?

0 投票
3 回答
2361 浏览

javascript - react-dropzone 两次打开文件选择器

我很长一段时间都遇到了 react-dropzone 的问题。

首先,让我们直接跳到视频的问题上:https ://drive.google.com/open?id=1UmWtHbQ9U0LBHxYtZ1YSoXrfsezwH-os

文件选择器窗口在我网站的每个文件输入上打开两次,这不是无限循环,只是两次。

这是我用于此 dropzone 的代码:

每次我放下甚至单击输入本身时都会发生不需要的事件

如果希望为你们提供足够的信息,如果您需要更多信息,我将非常乐意分享代码。

0 投票
1 回答
753 浏览

javascript - React DropzoneComponent 在上传之前在本地打开/修改文件

我正在使用基于 DropzoneComponent(Dropzone 的包装器)的自定义 Uploader 构建应用程序。在将文件上传到服务器之前,我想打开并更改文件,但我发现无法使用 FileReader 打开文件。

在代码中找到 2 条注释,哪个部分失败。

例子:

我按照教程如何做到这一点,但似乎 Dropzone 中的文件对象由于某种原因具有与 FileReader 不兼容的不同结构,也许是版本问题?

0 投票
1 回答
2917 浏览

reactjs - 使用 multer / react-dropzone 上传图片

我似乎无法使用 express、multer 和 react-dropzone 将图像上传到我的上传文件夹。我的代码如下:

使用 dropzone 示例的基本文件上传。然后我的提交功能是:

请注意文件返回图像具有的所有属性,例如 lastModifiedDate、名称、预览、大小、类型、webkitRelativePath。

但是,当我将数据传递给服务器时,我得到的响应是:

我的涉及图像的服务器代码在哪里:

我希望有人可以帮助告诉我为什么我的图片没有进入我的上传文件夹,因为我花了很长时间试图弄清楚这个基本示例。

0 投票
1 回答
6859 浏览

javascript - 读取base64中的blob文件并上传到服务器

当我在上传区域中放置文件时,React-dropzone返回一个对象,例如:

我阅读了此链接并尝试上传文件:React dropzone,如何上传图片?

但我认为文件不会被发送。

这是我的代码:

如果这种方法不正确,如何将文件发送到服务器端并在服务器端接收?

在服务器端,我使用的是 Hapij。

0 投票
1 回答
124 浏览

javascript - 使用 Canvas 缩放图像并等待结果

我正在使用react-dropzone上传文件。

在 onDrop 函数中,我缩放使用画布获得的每个图像。

实际缩放发生在下面的函数中

然后我构造的requestParams对象将被发送到服务器。我的问题是我希望我的客户端代码等到它遍历所有图像并构造最终requestParams对象。现在情况并非如此。如何让上面的代码等待?