DropZone 不会在 Windows 10 和 ChromeOS 上使用 MIME“文本/csv”过滤器设置获取 CSV 文件

ano*_*932 2 csv mime reactjs dropzone

在 Linux 和 macOS 上运行、测试和调试时 - 标准浏览器文件选择器很乐意接受 MIME 类型“text/csv”来过滤要使用 DropZone 上传的 CSV 文件。

Windows 10(即使使用 Chrome)和 ChromeOS(当然还有 Chrome)对此并不满意。

小智 7

Windows 将 .csv 文件识别为不同类型,因此将您的接受字符串更改为以下内容:

accept=".csv, application/vnd.ms-excel, text/csv"
Run Code Online (Sandbox Code Playgroud)

希望这可以帮助!

  • 我使用 ```acceptedFiles={[".csv, text/csv, application/vnd.ms-excel, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text /x-comma-separated-values"]}``` 以上对我不起作用。 (3认同)

ano*_*932 6

而不是使用像下面这样的 MIME 过滤器:

<Dropzone
            accept="text/csv"
            onDrop={(accepted, rejected) => { this.setState({ accepted, rejected }); }}
          >
Run Code Online (Sandbox Code Playgroud)

改用文件扩展名过滤器:

<Dropzone
            accept=".csv"
            onDrop={(accepted, rejected) => { this.setState({ accepted, rejected }); }}
          >
Run Code Online (Sandbox Code Playgroud)

此代码直接从位于以下位置的“接受”示例中提取:https : //react-dropzone.js.org/

完整的工作修改示例:

class Accept extends React.Component {
  constructor() {
    super()
    this.state = {
      accepted: [],
      rejected: []
    }
  }

  render() {
    return (
      <section>
        <div className="dropzone">
          <Dropzone
            accept=".csv"
            onDrop={(accepted, rejected) => { this.setState({ accepted, rejected }); }}
          >
            {({ getRootProps, getInputProps }) => (
              <div {...getRootProps()}  className="dropzone">
                <input {...getInputProps()} />
                <p>Try dropping some files here, or click to select files to upload.</p>
                <p>Only *.jpeg and *.png images will be accepted</p>
              </div>
            )}
          </Dropzone>
        </div>
        <aside>
          <h4>Accepted files</h4>
          <ul>
            {
              this.state.accepted.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
            }
          </ul>
          <h4>Rejected files</h4>
          <ul>
            {
              this.state.rejected.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
            }
          </ul>
        </aside>
      </section>
    );
  }
}

<Accept />
Run Code Online (Sandbox Code Playgroud)


kee*_*mor 5

如果您仅使用 useDropzone:

const { getRootProps, getInputProps } = useDropzone({
  onDrop,
  accept: { "text/csv": [".csv"] },
});
Run Code Online (Sandbox Code Playgroud)

Win10可以用,Mac没测试过