1

我想知道如何在 dropzone 上的文件已经保存在服务器和数据库中之后清空文件。我的问题是，当我提交它时，维护 dropzone 上的文件，甚至关闭模式，我希望我可以提供一个关于清空 dropzone 的代码，但我不知道所以我将保留 dropzone 和 onsubmit 的代码以下。

onsubmit 的代码

onSubmit() {
        debugger
        form.Status=0;
        form.isActive=true;
        return(form.Key > 0 ? this.creater : this.creater).call(this, form);
        return false;
}

ondrop 的代码

onDrop(acceptedFiles, e) {
        debugger
        console.log('Received files: ', acceptedFiles);
        this.setState({files: acceptedFiles});      
        const req = request.post('http://localhost:8933/api/upload/post');
        acceptedFiles.forEach(file => {
            req.attach(thisUuid , file);
        });
         req.end(callback);
    }

我的问题是提交时没有刷新 renderImage 文件

renderImg(file, index) {
    debugger
        let ext = file.name.split(".").slice(-1)[0];
        if(ext === "PNG" ||ext === "png" || ext === "jpg") {    
            return (<div> <i className="fa fa-file-image-o" ></i>{file.name}</div>)
        }
        if(ext === "doc" || ext === "docx") {
            return (<div> <i className="fa fa-file-word-o"></i>{file.name}</div>)
        }
        if(ext === "pdf" || ext === "pdf") {
            return (<div> <i className="fa fa-file-pdf-o"></i> {file.name}</div>)
        }
        if(ext === "xlsx" || ext === "xls") {
            return (<div> <i className="fa fa-file-excel-o"></i> {file.name}</div>)
        }       

        return (
            <div key={index} className="pms-file-preview drop-box">
                <div className="pms-file-footer">
                    <div className="pms-file-caption drop-caption" title={file.name}>
                        {file.name}

                    </div>
                </div>
            </div>
        )
        return false;
    }

最后是dropzone

<Dropzone  
                        accept = ".pdf,.doc,.docx,.odt,.jpg,.png,.xls,.xlsx"
                        onDrop={this.onDrop.bind(this)}
                        className="pms-upload">
                        {this.state.files.length > 0 ? 
                            <div>{this.state.files.map(this.renderImg)}</div> : 
                            <div className="pms-upload-title">
                                Click or drag & drop files here
                             </div>
                        }
                    </Dropzone>
4

1 回答 1

0

要清空 droppe 项目，您应该使用 set state 再次使文件为空

  onSubmit() {
            debugger
            form.Status=0;
            form.isActive=true;
            this.setState({files: []})
            return(form.Key > 0 ? this.creater : this.creater).call(this, form);
            return false;
    }
于 2017-07-20T02:09:43.383 回答