让react-dropzone接受*所有*文件

Question

我继承了 AWS EC2 实例服务器上前端的 React.JS 和后端的 Node.JS/Express.JS 代码库。我使用的代码是react-dropzone（https://react-dropzone.js.org/），并且仅用于拖放图像文件。我正在处理的项目的产品所有者现在希望它接受所有文件（*.pdf、*.docx、*.xlsx 等）。

\n\n

我想知道如何让它接受所有文件？我已经浏览了react-dropzone文档，但还没有找到任何示例来展示如何让它接受所有文件类型？就像设置accept="..."fromaccept="image/*"到一样简单吗accept="*/*"？字符串可以accept="..."是数组吗，例如：accept=["image/*","text/*",...]等？让react-dropzone接受任何文件类型的正确方法是什么？

\n\n

onDrop这是我的回调 \xe2\x80\x94的代码

\n\n

    onDrop = (acceptedFiles, rejectedFiles) => {\n      let files = acceptedFiles.map(async file => {\n        let data = new FormData();\n        data.append("file", file);\n\n        let item = await axios\n          .post("triage/upload", data, {\n            headers: {\n              "X-Requested-With": "XMLHttpRequest",\n              "Content-Type": "application/x-www-form-urlencoded"\n            }\n          })\n          .then(response => {\n            return Object.assign(file, {\n              preview: URL.createObjectURL(file),\n              filename: response.data.filename\n            });\n          })\n          .catch(err => {\n            let rejects = rejectedFiles.map(async file => {\n              let data = new FormData();\n              await data.append("file", file);\n\n              console.log("There was an error while attempting to add your files:", err);\n              console.log("The files that were rejected were:\\n", rejects.join(\'\\n\'))\n            })\n          });\n        return item;\n      });\n      Promise.all(files)\n      .then(completed => {\n        console.log("completed", completed);\n        let fileNames = completed.map(function(item) {\n          return item["filename"];\n        });\n        this.setState({ files: completed, fileNames: fileNames });\n      })\n      .catch(err => {\n        console.log(\'DROPZONE ERROR:\', err);\n      });\n    };\n

\n\n

<DropZone>...这是同一文件 \xe2\x80\x94 中自身的代码

\n\n

              <Dropzone accept="image/*" onDrop={this.onDrop}>\n                {({ getRootProps, getInputProps, isDragActive }) => {\n                  return (\n                    <div\n                      {...getRootProps()}\n                      className={classNames("dropzone", {\n                        "dropzone--isActive": isDragActive\n                      })}\n                    >\n                      <input {...getInputProps()} />\n                      {isDragActive ? (\n                        <div>\n                          <div className="centered">\n                            <Icon name="cloud upload" size="big" />\n                          </div>\n                          <div className="centered">Drop Files Here.</div>\n                          <div className="centered">\n                            <Button className="drop-button">\n                              Or Click to Select\n                            </Button>\n                          </div>\n                        </div>\n                      ) : (\n                        <div>\n                          <div className="centered">\n                            <Icon name="cloud upload" size="big" />\n                          </div>\n                          <div className="centered">\n                            Drag and Drop Supporting Files here to\n                            Upload.\n                          </div>\n                          <div className="centered">\n                            <Button className="drop-button">\n                              Or Click to Select\n                            </Button>\n                          </div>\n                        </div>\n                      )}\n                    </div>\n                  );\n                }}\n              </Dropzone>\n

\n

Answer 1

您可以像常规一样使用input，这样您就可以执行多种文件类型，例如：image/*,.pdf.

参考这里。