Javascript 我们如何在reactjs中简单地上传文件夹？

我在这里寻找reactjs中的上传文件夹。我在那个文档中有文件夹，docx文件在那个里。当用户点击浏览按钮时，我只想上传文件夹。在那个里我不允许用户选择单个文件。有人可以给我一个简单的例子，文件夹上传或文件夹选择，其中用户只能选择文件夹而不是文件。实际上，我正在查看react dropzone库，但不了解如何使用它来选择或上载文件夹。如果有人可以指导我或给我一个简单的示例，其中显示文件夹上载示例将非常有帮助。提前感谢。

您可以通过将这些属性“webkitdirectory”添加到输入中来允许文件夹上载：

 <input type="file" webkitdirectory mozdirectory directory />

---

但是您不能禁用用户只能上载一个文件的功能。

您可以通过将这些属性空的“webkitdirectory目录”添加到您的react dropzone输入中来允许文件夹上载

像这样。

通过使用此选项，用户无法选择单个文件

它对我的作用：）

基于，您可以通过

getFilesFromEvent

属性自定义文件上载事件，如react dropzone中所述

更新： 这是一个取自官方文件的简化示例

从“React”导入React
从“react dropzone”导入{useDropzone}
功能插件（道具）{
const{acceptedFiles，getRootProps，getInputProps}=useDropzone({
GetFileFromEvent:event=>myCustomFileGetter（事件）
})
返回(
将一些文件拖放到此处，或单击以选择文件

)
}
导出默认插件
异步函数myCustomFileGetter（事件）{
常量文件=[]
//检索由拖动事件或选择事件加载的文件
const fileList=event.dataTransfer？event.dataTransfer.files:event.target.files
对于（var i=0；i

如果您希望使用d&d上传文件夹，我建议您：

它支持文件和文件夹直接上传。 它甚至可以用于递归上载子文件夹：

从“@rpldy/Uploady”导入上传；
从“@rpldy/upload drop zone”导入UploadDropZone；
常量MyApp=（）=>(
在此处拖放文件或文件夹（&D）
);感谢回复，react dropzone库中是否存在用户只能选择文件夹的地方？因为你给出的答案是纯javascript的，对吧！。不管怎么说，在查看react dropzone之后，它似乎没有任何选项可以限制为只使用文件夹。但您可以在上载文件之前检查它是否为目录，然后上载它是否为目录，或者如果不是，则显示错误消息。@NiI您可以在（codesandbox.io）中给我举个例子，这将非常有帮助。不是真的，但如果您这样做，我可以帮助您。无论如何，在react dropzone示例中有一个名为“onDrop”的方法，如果你幸运的话，也许“acceptedFiles”变量中有一些信息不能用来确定它是否是文件夹，如果你不幸运的话，它只是文件夹中包含的文件列表，在这种情况下，你必须构建/分叉你的专用组件。@NiI是的，有“acceptedFiles”道具只对已接受的文件进行验证，我以前使用过此库进行单个文件上载。但现在我想上载文件夹而不是单个文件，还有另一个称为“multiple”的道具，允许我们选择多个文件，但不选择我尝试过但不适用于文件夹上载的文件夹：（您好，我已经尝试过了，它在JS中工作，但当我尝试在TS中处理它时，它会出现以下错误：“属性'webkitdirectory'在类型'DetailedHTMLProps'上不存在”“你知道如何解决这个问题吗？你能提供一个解决文件夹上传问题的具体例子吗。@igorpcholkin我用一个例子更新了我的答案。我希望它会有用。”