在生产中,FilePond 实例在自定义模式中初始化时似乎破坏了我的整个页面。出现标准灰色框,但不显示其中的文本。这在本地工作得很好,但是在将其投入生产之后,每当我尝试使用它时,浏览器上的选项卡最终都会冻结,我必须关闭它。我认为这可能是内存泄漏。
版本: React:16.5.2 multer:1.4.1 multer-s3:2.9.0 开发节点:10.15.3 生产节点:8.11.4(节点版本的巨大差异会导致此问题吗?)
我的服务器正在运行 node 并使用 multer 包作为文件上传的中间件来表达。我在成功时返回状态 200 以及文件密钥/路径供我在前端参考。
我曾尝试通过浏览器控制台记录快照,但并没有取得太大的成功。不幸的是,我无法在本地破解它,但对生产环境没有很多可访问性,因此很难在不发生任何错误的情况下缩小范围。我相信这是某种内存泄漏,因为控制台或哨兵没有报告任何错误,但它似乎很快使浏览器选项卡的响应速度越来越慢。关于如何更好地查明和诊断此错误的任何想法都将有助于加载。
在我的 getDerivedStateFromProps 和 componentDidMount 函数之后,我有了我的 handleInit 函数:
handleInit() {
console.log('FilePond instance has initialised', this.pond);
}
return (
<div className="card mx-3 p-3">
<FiltersBar leftComponents={leftComponents} rightComponents={rightComponents} />
<Table data={this.props.contact.attached_files || []} headers={tableHeaders} />
<Modal
state={this.state.modalState}
title="Upload File"
close={this.closeModal}
>
<FilePond
ref={ref => (this.pond = ref)}
files={this.state.files}
allowMultiple={true}
name="documents"
oninit={() => this.handleInit()}
server={
{
process: {
url:
'endpoint-nodeserver',
method: 'POST',
onload: file => this.props.uploadContactFile(JSON.parse(file).values),
headers: {
authorization: this.state.user,
},
onerror: () => alert('unable to upload this document')
},
}}
allowRevert={false}
onwarning={error => this.handleError(error)}
onupdatefiles={fileItems => {
this.setState({
files: fileItems.map(fileItem => fileItem.file),
});
}}
/>
</Modal>
</div>
);
}}