javascript - 读取文件 Reactjs

Question

我有两个问题。我正在使用 react-dropzone

1. 如何设置不同的设置？他们有 file.preview、最大大小等。如何在我的 React js 中设置它？这是在初始化还是什么？

2. 我按照示例操作，现在有了 OnDrop 函数，但我想知道如何在我的 javascript 代码中读取文件(比如 csv/文本文件)的内容。该示例仅显示如何将其上传到服务器。

现在我有

export default class TransactionHistory extends React.Component {

    onDrop(acceptedFiles, rejectedFiles) {
      acceptedFiles.forEach((file)=> {
           console.log(file)
        });
    }
    render() {
        return (
            <div>
            <Dropzone onDrop={(acceptedFiles, rejectedFiles) => this.onDrop(acceptedFiles,rejectedFiles) }>
              <div>Upload your transaction here. By Dragging and dropping your file here. Or double clicking here.</div>
            </Dropzone>
          </div>
        )
    }
}

编辑

上传正常

  onDrop(acceptedFiles, rejectedFiles) {
      acceptedFiles.forEach((file)=> {
          var fr = new FileReader();
            fr.onload = function(e) {
                console.log(e.target.result);
            };
         fr.readAsText(file);
        });
    }

现在不确定如何设置这些“功能”

disableClick [Boolean | **false**] — Clicking the <Dropzone> brings up the browser file picker.
multiple [Boolean | **true**] — Accept multiple files
minSize [Number | **0**] — Only accept file(s) larger than minSize bytes.
maxSize [Number | **Infinity**] — Only accept file(s) smaller than maxSize bytes.
accept - Accept only specified mime types. Must be a valid MIME type according to input element specification, for example application/pdf, image/*, audio/aiff,audio/midi

Answer 1

您可以通过将它们放在 <Dropzone> 中来设置这些功能在 render() 中标记 我相信作者这样做是为了在同一窗口中有多个拖放区时可以自定义每个拖放区。

即:

<Dropzone disableClick={false} 
     accept={"text/csv"}
     minSize={23} 
     maxSize={3000}>
</Dropzone>

我找到的引用/示例: https://gist.github.com/wvance/c052a57654ea943edee113a180598ab8

编辑: github readme中预览字段的例子

render: function () {
    return (
        <div>
            <Dropzone ref={(node) => { this.dropzone = node; }} onDrop={this.onDrop}>
                <div>Try dropping some files here, or click to select files to upload.</div>
            </Dropzone>
            <button type="button" onClick={this.onOpenClick}>
                Open Dropzone
            </button>
            {this.state.files.length > 0 ? <div>
            <h2>Uploading {this.state.files.length} files...</h2>
            <div>{this.state.files.map((file) => <img src={file.preview} /> )}</div>
            </div> : null}
        </div>
    );
}

如果你仔细看这个例子(这只是整个事情的一个片段)你会注意到文件来自 this.state.files <= 这是一个数组 其中 this.state.files 是您到达那里的 onDrop 中接受的文件...

我真的建议您更仔细地阅读自述文件并理解该示例中的每一行代码，然后再尝试对其进行自定义并在您的项目中使用它并在此处提问。但希望这能澄清一些事情