dropzone.js使用手动ajax调用显示进度条

时间:2017-04-08 10:07:14

标签: javascript ajax reactjs

尝试使用此库https://github.com/felixrieseberg/React-Dropzone-Component集成与dropzone的反应,但没有运气,卡住了几个小时。文件已上传但无法看到任何进度条。

export default class PhotoUpload extends Component {
    constructor(props) {
        super(props);

        this.dropzone = null;

        // For a full list of possible configurations,
        // please consult http://www.dropzonejs.com/#configuration
        this.djsConfig = {
            acceptedFiles: "image/jpeg,image/png,image/gif",
            addRemoveLinks: true,
            autoProcessQueue: false
        };

        this.componentConfig = {
            iconFiletypes: ['.jpg', '.png', '.gif'],
            showFiletypeIcon: true,
            postUrl: 'no-url'
        };

        this.callback = (file) => {

            this.dropzone.processQueue();

            myApi.upload(file).then((e) => {
                console.log('done upload '+e.filename+' to server');
            })
        }
    }

    render() {
        const config = this.componentConfig;
        const djsConfig = this.djsConfig;

        // For a list of all possible events (there are many), see README.md!
        const eventHandlers = {
            init: dz => this.dropzone = dz,
            drop: this.callback,
            addedfile: this.callback,
        }

        return <DropzoneComponent config={config} eventHandlers={eventHandlers} djsConfig={djsConfig} />
    }
}

显然,这行代码不起作用:this.dropzone.processQueue();

0 个答案:

没有答案