小智 7
Windows 将 .csv 文件识别为不同类型,因此将您的接受字符串更改为以下内容:
accept=".csv, application/vnd.ms-excel, text/csv"
Run Code Online (Sandbox Code Playgroud)
希望这可以帮助!
而不是使用像下面这样的 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)
如果您仅使用 useDropzone:
const { getRootProps, getInputProps } = useDropzone({
onDrop,
accept: { "text/csv": [".csv"] },
});
Run Code Online (Sandbox Code Playgroud)
Win10可以用,Mac没测试过
归档时间: |
|
查看次数: |
4824 次 |
最近记录: |