问题标签 [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 投票
0 回答
1747 浏览

javascript - 使用 redux 形式的 dropzone-react-component

我正在使用 react 来设计一个简单的网页,该网页使用dropzone-react-component上传多个图像,并使用 reducer-dispatcher 模式(REDUX)提交到服务器。

坚持如何将我的文件 blob 或在 dropzone 中排队的文件数组传递给减速器。

请找到参考代码:

  1. 反应组件类

    /li>

注意:为表单提交定义的常量函数

请求已到达调度程序,但未检索到图像文件。我是否需要为其他 redux 字段定义相同的组件?

或者如果有人可以建议我将文件直接上传到 S3?

任何帮助,将不胜感激!

0 投票
1 回答
134 浏览

reactjs - React-Dropzones + Webpacks 抛出缺少 index.js.map 错误

在我的项目中,我想使用 React-Dropzones 进行文件上传。一切正常,但是当 React-Dropzones 是项目的一部分时,它试图从我的公共 javascripts 文件夹中提取一个 index.js.map 文件(并且该文件不存在)。

我正在使用具有以下配置的 Webpack:

0 投票
0 回答
410 浏览

javascript - Dropzone node.js 通过 JSON 上传图片到服务器

我正在尝试将图像上传到服务器,以便可以将图像保存在服务器上。使用的服务器语言是 PHP。前端站点是 react.js 并选择我正在使用的文件react-dropzone。图像被选中,我在这个函数中处理丢弃的图像。

然后我在渲染方法中将图像映射到屏幕上。图像确实会出现在屏幕上。

图像存储在本地 URL 中,我可以在客户端上预览。如果我控制台记录文件,它看起来像这样。

文件{预览:“blob:http://localhost:3000/9b499d57-9248-499c-8974-607143f2ed1d ”,名称:“IMG_20140421_151555.jpg”,lastModified:1398090260000,lastModifiedDate:2014 年 4 月 21 日星期一 15:24:20 GMT +0100(格林威治标准时间夏令时),webkitRelativePath: "", ...}

我想要做的是将文件作为 JSON 格式的 blob 发送到 PHP 脚本,以便我可以将图像保存在服务器上。这是服务器的 fetch 方法。我只是想在一分钟内发送一张图片。

PHP脚本是

写入服务器的文件是空的。如何发送图像?

我是一名学生,对编程很陌生。如果我离得很远,你能告诉我其他更好的方法吗?

如果您需要任何进一步的信息,请询问我。谢谢

0 投票
2 回答
248 浏览

javascript - Javascript FileReader 在 readyState 1 挂起(使用 react-dropzone)

抱歉……这个问题太傻了。

0 投票
1 回答
597 浏览

reactjs - 如何将 onDrop 回调传递给 ImageInput

我正在尝试传递一个回调,以便在提交表单之前使用 ImageInput 保存文件/图像。我很好奇如何做到这一点。onDrop、onChange 等。不要做任何事情。谢谢!

0 投票
3 回答
261 浏览

reactjs - 是否可以上传多个文件,获取它们的 id,然后使用 ImageInput 将这些 id 绑定到父资源?

从我所见,当我按下包含以下内容的表单提交时,所有操作都会发生:

然后一些类似的代码正在运行:

然后运行 ​​restClient 代码以在创建或编辑时保存表单的资源。

我很好奇如何在这些文件保存在数据库中后获取 ids.. 然后提交表单并将这些 ids 连接到特定的 ImageInputs..

编辑:

使用上面的代码,我只得到一个带有我图片的第一个 id 的数组

谢谢!

0 投票
2 回答
2510 浏览

reactjs - ReactJS Dropzone 如何获取基本文件名(无扩展名)?

我使用 reactjs dropzone 组件进行文件上传(https://react-dropzone.js.org/)。有onDrop上传文件数组的处理程序,包含带扩展名的文件名。我怎样才能获得基本名称(不带扩展名)?

0 投票
1 回答
273 浏览

reactjs - 如何使图像/文件可下载

我希望能够下载图像/文件。我认为这就像悬停在图像上时的删除按钮一样。理想的情况是从服务器渲染图像时的下载图标。我的想法是这样的

并包装 img 标签。并分别用于文件。那么有没有更体面的方法来做到这一点而不是覆盖所有文件(FileInput、FileInputPreview、ImageInput、ImageField 等)

谢谢!

0 投票
2 回答
908 浏览

reactjs - 反应功能不适用于子组件

我正在尝试使一个功能正常工作,该功能可以删除使用 React Dropzone 和 react-sortable 上传的图像。

我有 dropzone 工作,并且排序工作,但由于某种原因,我在可排序项目上拥有的从数组中删除该特定项目的功能不起作用。onClick 事件似乎没有调用该函数。

我的代码如下。

0 投票
0 回答
1603 浏览

reactjs - 如何测试 react-dropzone 的文件上传功能

我想测试我的 react dropzone onDrop 方法,这是我迄今为止尝试过的。

似乎确实触发了 onDrop 功能,但文件没有成功上传到云端。如何测试文件上传功能并检查服务器的回调以查看它们是否已传递到服务器?