0

我正在使用react-dropzone. 我可以成功上传文件并在拖放 div 下方显示文件名和大小。

当前应用条件

我一直在尝试让拖放区域在显示文件后在后台运行，但失败了。但我不能这样做。我知道这是可以做到的，因为这就是 Dropbox、Google Drive 和几乎所有其他文件上传网站的工作方式。实现这一目标的最佳方法是什么？

这是我到目前为止所做的工作；

文件上传器容器

onFileUploader = ( files ) => {
    files.forEach(file => {
        this.setState({...this.state, files : this.state.files.concat(file)})

        const jsonFile = new FormData();
        jsonFile.append('file', file)
        jsonFile.append('multichainAddress', this.state.multichainAddress);

        axios({
            method: "POST",
            url: url,
            data: jsonFile,
            dataType: "json",
            cache: false,
            processData: false,
            contentType: false
        })
            .then(response => {
                console.log("post success - ", response);
            })
            .catch(error => {
                console.log("post failed - ", error);
            });
    });

    this.setState({...this.state, filesUploaded : true});
    console.log(this.state.files);
}

render () {
    console.log("[FileUploader] render");

    return (
        <Aux>
            <div>
                <Grid container spacing={8}>
                    <Grid item md={10}>
                        <FileDropzone onDropHandler={this.onFileUploader} dropzoneReference={this.onDropzoneRef}/>
                        <Files files={this.state.files} />
                    </Grid>
                    <Grid item md={2} >
                        <Button
                            variant="outlined"
                            component="span"
                            onClick={() => {
                                this.dropzoneRef.open();
                            }}
                        >
                            Upload
                            <CloudUploadIcon />
                        </Button>
                    </Grid>
                </Grid>
            </div>
        </Aux>
    );
}

FileDropzone 组件

render () {
    return (
        <section>
            <div>
                <Dropzone
                    onDrop={this.props.onDropHandler}
                    className={classes.FileDropzone}
                    ref={(node) => {
                        this.props.dropzoneReference(node);
                    }}
                >
                    Drag n drop files here
                </Dropzone>
            </div>
        </section>
    );
}

到目前为止，我已经尝试隐藏该元素，但这似乎也禁用了它。我也尝试将道具添加preventDropOnDocument到Dropzone组件中，但什么也没做。

4

0 回答 0