Question

我已经在线阅读了许多有关如何使用Dropzone将文件上传到我的服务器的资料，而我实际上已经编写了下面的代码来执行任务。不幸的是，当我单击链接打开该页面时，控制台上出现空白屏幕

警告：道具类型失败：提供给children的类型string的道具Dropzone无效，预期function。 TypeError：Object（...）不是函数

提供的this.onDrop实际上是一个函数。

我尝试将{this.onDrop}更改为{（）=> this.onDrop（）}，{this，onDrop（）}等

import React, { Component,Fragment } from 'react';
import {Row, Col, Input, Button, Card, CardBody} from 'mdbreact';
import request from 'superagent';
import Dropzone from "react-dropzone";
import { Line } from 'rc-progress';
class Fileupload extends Component {

constructor(props) {
    super(props);
    this.state = {
      files: [],
      name:'test'
    };
    this.onDrop = this.onDrop.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

//this function takes a a file and attach it to the previous files.
onDrop(files) {
    this.setState({
      files: this.state.files.concat(files),
    });
}

//Handling Submision
handleSubmit(event) {
    event.preventDefault();
    let authKey = 'myKey';
    const {files} = this.state;
    this.setState({ submitted: true });
    if (files) {
        //sent to my server now using
        let req = request.post('http://localhost/api/upload?access-token='+authKey);
        req.on('progress', event => {
            let percent = Math.floor(event.percent);
            if (percent >= 100) {
                this.setState({ percent: 100 });
            } else {
                this.setState({ percent: percent });
            }
        });
        const that = this;
        req.send(this.state);
        req.end((err, res) => {
            console.log('Successfully uploaded');
        });
    }
}

render() {
    const previewStyle = {
      display: 'inline',
      width: 100,
      height: 100,
    };
    return (
        <Card className="space-above">
            <CardBody>
                <form name="form" onSubmit={this.handleSubmit}>
                    <Dropzone
                      onDrop={this.onDrop}
                    >
                      Drop an image, get a preview!
                    </Dropzone>

                    <div className="text-center">
                        <Button type="submit" onClick={this.handleSubmit} className=" btn-primary pull-right">Upload Files</Button>
                    </div>
                </form>
                {this.state.submitted &&
                    <Line percent={this.state.percent} strokeWidth='1' strokeColor='#2db7f5' strokeLinecap='square' />
                }
                {this.state.files.length > 0 &&
                  <Fragment>
                    <h3>Previews</h3>
                    {this.state.files.map((file) => (
                      <img
                        alt="Preview"
                        key={file.preview}
                        src={file.preview}
                        style={previewStyle}
                      />
                    ))}
                  </Fragment>
                }
            </CardBody>
        </Card>
    );
}
}
export default Fileupload;

对此我的任何帮助将不胜感激，尽管我知道我应该省略一些小问题，但我看不到哪里出了问题。

JS Eror试图使用Dropzone在Reactjs中上传文件

0 个答案: