Question

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

如何设置不同的设置？他们有file.preview，max size等。如何在我的反应中设置它？这是在init还是什么？
我按照示例现在有OnDrop功能，但我想知道如何在我的javascript代码中读取文件的内容（比如csv / text文件）。该示例仅显示如何将其上载到服务器。

现在我有

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时自定义每个dropzone。

即：

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

我发现的参考/示例： https://gist.github.com/wvance/c052a57654ea943edee113a180598ab8

编辑： github自述文件中预览字段的示例

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 ＆lt; =这是一个数组其中this.state.files是你在那里的onDrop中接受的文件...

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

阅读文件Reactjs

1 个答案: