Question

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

Windows 10（甚至支持Chrome）和ChromeOS（当然也支持Chrome）对此都不满意。

Answer 1

代替使用如下所示的MIME过滤器：

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

改为使用文件扩展名过滤器：

<Dropzone
            accept=".csv"
            onDrop={(accepted, rejected) => { this.setState({ accepted, rejected }); }}
          >

此代码直接从位于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 />

Answer 2

Windows将.csv文件识别为其他类型，因此将您的接受字符串更改为以下内容：

accept=".csv, application/vnd.ms-excel, text/csv"

希望这会有所帮助！

DropZone无法在设置了MIME“文本/ csv”过滤器的Windows 10和Chrome操作系统上拾取CSV文件

2 个答案: