在FineUploader包装器外部渲染上传项目

时间:2018-08-04 11:29:01

标签: javascript reactjs fine-uploader

上载某些文件时,Fine uploader会执行以下图像:

1 但是我想当用户上传一些文件时,Fine uploader显示上传项目,如下图所示:

enter image description here

我编写了以下代码,但是当上传一些文件时,在FineUploader包装器内以及其底部显示文件。但我只想显示在上传器的底部

const uploader = new FineUploaderTraditional({
  options: {
    request: {
      endpoint: "http://example.com/upload"
    },
});

componentDidMount() {
    uploader.on('submitted', (id) => {
        this.setState((prevState) => ({
            uploadingItems: [...prevState.uploadingItems, id]
        }))
    })
}

<FileInput uploader={ uploader } />
{
    this.state.uploadingItems.length &&
        this.state.uploadingItems.map(id => (
            <div key={ id }>
                <Thumbnail id={ id } uploader={ uploader } />
                <PauseResumeButton id={ id } uploader={ uploader } />
                <progressBar id={id} uploader={uploader} />
            </div>
        ))
}

0 个答案:

没有答案