问题标签 [react-dropzone]

我正在构建一个无服务器 React 应用程序（使用 npm 进行开发），它使用 DropzoneS3Uploader 将图像上传到 S3。我将其配置为使用 API Gateway（由 Lambda 支持）在将文件上传到 S3 存储桶之前请求签名 URL

render 方法继续返回组件，如下所示...

执行此操作时，它会设法生成签名的 URL。

请求 URL：https://.eu-west-1.amazonaws.com/Prod/?objectName=&contentType=image%2Fjpeg 请求方法：POST 状态代码：200

然而，它直接从那个进入 404（下面的堆栈跟踪）。我开始怀疑 npm 是否尝试将图像缓存为临时文件？无论出现什么问题，在对 S3 的 PUT 请求期间它似乎都无法引用服务器/图像......

请求 URL：http://localhost:3000/undefined 请求方法：PUT 状态码：404 Not Found

http://localhost:3000/undefined 404（未找到）./node_modules/react-dropzone-s3-uploader/node_modules/react-s3-uploader/s3upload.js.S3Upload.uploadToS3 @ s3upload.js:171（匿名） @ s3upload.js:108 XMLHttpRequest.send (async) ./node_modules/react-dropzone-s3-uploader/node_modules/react-s3-uploader/s3upload.js.S3Upload.executeOnSignedUrl @ s3upload.js:113 ./node_modules/react -dropzone-s3-uploader/node_modules/react-s3-uploader/s3upload.js.S3Upload.uploadFile @ s3upload.js:178 (匿名) @ s3upload.js:53 ...

作为 DropzoneS3Uploader 上传选项的一部分，有一个“服务器”选项。把它留空，我得到这个错误，用其他人填充它，它用我提到的任何服务器 URL 替换错误。如前所述，我计划运行这个无服务器，所以没有服务器可提。

其他人以前看过这个或有什么建议吗？

我切换到 Dropzone 并使用 axios 并且它工作正常，所以我想知道 DropzoneS3Uploader 是否只是抽象了太多的实现代码以允许控制这种行为？

谢谢！

我正在使用 react drop-zone 组件将文件上传到服务器。

我想在单击按钮时调用放置区打开功能。

这是我到目前为止所尝试的：

我refs用来引用放置区。另请注意，我有多个放置区

在单独的按钮上单击我正在调用一个函数

单击按钮时，我收到以下错误：-

TypeError：无法读取此行上未定义的属性“打开” this.refs.myRef.open();

非常感谢任何帮助或建议。

谢谢你。

我有一个反应组件，用户可以在其中上传图片，并且他还显示了上传图片的预览。他可以通过单击图像对应的删除按钮来删除图像。我正在使用 react-dropzone 。这是代码：

我的问题是即使在添加或删除图像后我的组件也不会重新渲染。另外，我已经注意不直接改变状态数组。有人，请帮忙。

我正在尝试使用react-dropzone并且我正在尝试读取已拖入该区域的文件夹的所有图像。

我看到他们有一个例子。

但它似乎不起作用，也没有说明使用了哪个 3rd 方插件。

我的本地副本收到此错误

如何将我的文件从我的 javascript（文件通过react dropzone）发送到我的 asp.net 核心 api？

我正在使用 axios，我有这样的东西

这确实有效，但只有“文件”被填充，“文件夹名”变量为空。

我试图将其放入模型中，但它不起作用（400 状态码）

也是 FormData 将其发送到服务器的唯一方法吗？

编辑

好像我需要使用[FromForm] Test test

我正在使用react-dropzone. 我可以成功上传文件并在拖放 div 下方显示文件名和大小。

我一直在尝试让拖放区域在显示文件后在后台运行，但失败了。但我不能这样做。我知道这是可以做到的，因为这就是 Dropbox、Google Drive 和几乎所有其他文件上传网站的工作方式。实现这一目标的最佳方法是什么？

这是我到目前为止所做的工作；

文件上传器容器

FileDropzone 组件

到目前为止，我已经尝试隐藏该元素，但这似乎也禁用了它。我也尝试将道具添加preventDropOnDocument到Dropzone组件中，但什么也没做。

我正在使用dropzonejs / react-dropzone，我想取一个文件夹并将其拖入。它应该将文件提取出来，但在 FF 中，file.type 为空白，因此所有文件都被拒绝。

我有基本设置

常量配置 = this.componentConfig; 常量 djsConfig = this.djsConfig; const eventHandlers = { init: dz => this.dropzone = dz, addedfile: this.handleFileAdded.bind(this), 发送: this.sending.bind(this), processing: this.processing.bind(this), maxfilesexceeded: this.maxfilesexceeded.bind(this), maxfilesreached: this.maxfilesreached.bind(this), 成功: this.success.bind(this) }

我正在尝试使用道具和回调将上传文件的状态发送回父组件（如本教程中所述）。

我的文件上传由react-dropzone组件处理。

这是我的组件：

应用程序.js

FileDrop.js

当我运行应用程序并将文件放入 dropzone 时，我收到一条错误消息，指出this.props.dataFromFileDrop它不是函数。我可以知道我在哪里犯了错误吗？

发生错误是因为我没有dataFromFileDrop作为道具传递给 Dropzone 组件吗？

将此添加到 FileDrop 中的构造函数没有帮助：

在这个官方的 react-dropzone 示例<Dropzone />中，通过将整个应用程序包装在组件中来实现全屏放置区域。我正在创建一个多路由应用程序，并且觉得将所有内容包装在<Dropzone />组件内并不是一个非常干净的解决方案。

有没有办法在 React 中创建一个全屏/页面拖放区而不将<Dropzone />组件放在根级别？

我的图像的缩略图预览在我的放置区之外（它显示在下面）。如何让它显示在 dropzone / 而不是 dropzone 中？

这是我的代码：

使用 ReactDropzone 配置：