有没有办法获取提供给服务器的qqfilename和qquuid？

Question

现在，我正在使用react-fine-uploader将分块的文件发送到服务器。我想知道是否可以获取在组件另一部分需要的文件名和uuid。我相信它们在我创建的上载器对象处，但是我不确定如何获取它们。

我尝试检查上载对象，但似乎没有在其中显示。

const uploader = new FineUploaderTraditional({
    options: {
        chunking: {
            enabled: true
        },
        deleteFile: {
            enabled: true,
            endpoint: `http://app.client.local/upload_delete`
        },
        request: {
            endpoint: `http://app.client.local/upload_chunk`
        },
        retry: {
            enableAuto: false
        }
    }
})

const isFileGone = status => {
    return [
        'canceled',
        'deleted',
    ].indexOf(status) >= 0
}

class SVFineUploaderComponent extends Component {
    constructor() {
        super()

        this.state = {
            submittedFiles: []
        }
    }

    componentDidMount() {
        uploader.on('statusChange', (id, oldStatus, newStatus) => {
            if (newStatus === 'submitted') {
                const submittedFiles = this.state.submittedFiles

                submittedFiles.push(id)
                this.setState({ submittedFiles })
            }
            else if (isFileGone(newStatus)) {
                const submittedFiles = this.state.submittedFiles
                const indexToRemove = submittedFiles.indexOf(id)

                submittedFiles.splice(indexToRemove, 1)
                this.setState({ submittedFiles })
            }
        })
    }

    renderFileInput = () => {
        return (
            <Container style={{border: "3px dotted"}}>
                <FileInput uploader={ uploader }>
                    <Dropzone uploader={ uploader }>
                        <span class="icon ion-upload">Attach or Drop Files Here</span>
                    </Dropzone>
                </FileInput>
            </Container>
        );
    }

    renderFile = () => {
        console.log(uploader)
        return (
            <Container style={{border: "3px dotted"}}>
                {
                    this.state.submittedFiles.map(id => (
                        <React.Fragment>
                            <Filename key={ id } id={ id } uploader={ uploader } />
                            <DeleteButton key={ id } id={ id } uploader={ uploader } />
                        </React.Fragment>
                    ))
                }
            </Container>
        );
    }

    render() {
        if (this.state.submittedFiles.length === 0)
            return this.renderFileInput();

        return this.renderFile();
    }
}

export default SVFineUploaderComponent;

Answer 1

显然，您可以通过在方法本身之前添加here至.methods后缀来使用给定的uploader方法。

示例

{console.log(uploader.methods.getName(id))}
{console.log(uploader.methods.getFile(id))}
{console.log(uploader.methods.getUuid(id))}