使用 vanilla javascript 销毁动态创建的文件池实例答案

【问题标题】：Destroy dynamically created filepond instance with vanila javascript使用 vanilla javascript 销毁动态创建的文件池实例
【发布时间】：2020-10-15 13:47:33
【问题描述】：

我在我的函数中创建了 filepond 实例，它显示了具有文件上传功能的模态块。现在我需要在关闭模态块时销毁创建的实例，因为我有理由使用新的 filepond 实例和参数调用 thet 函数以用于其他用途。请指教如何正确实现销毁动态创建的文件池实例；

函数初始化文件池：

const showUploader = () => {
    const pond = FilePond.create( inputElement, {
            acceptedFileTypes: ['image/png', 'image/jpeg', 'image/jpg','application/pdf'],
            instantUpload: true,
            /* other settings */
            server: {
                url: '/process.php?' + urlParams,
                process: {
                    onload: (response) => {
                        console.log(response);
                    },
                    onerror: (error) => {
                        console.log(error);
                    }
                },
                revert: {
                    onload: (response) => console.log(response),
                    onerror: (response) => console.log(response),
                },
                load: {
                    onload: response => { console.log(response); },
                    onerror: response => { console.log(response); },
                }
            }
        });
}

我必须销毁它的功能：

const closeUploader = () => {
   //TODO: Destroy created filepond instance
}

提前致谢！

【问题讨论】：

标签： javascript filepond

【解决方案1】：

使用FilePond.destroy 方法。

<intput type="file" name="filepond" required multiple>

<script>
const inputElement = document.querySelector('input[type="file"]');

// create the FilePond instance
FilePond.create(inputElement);

// destroy the FilePond instance by element reference
FilePond.destroy(inputElement);
</script>

您也可以在实例本身上调用destroy，在您的情况下，该实例将是pond.destroy()。

https://pqina.nl/filepond/docs/patterns/api/filepond-object/#destroying-a-filepond-instance

【讨论】：

谢谢你@Rik，你的回答很成功，我用了pond.destroy()，但它没有用。但是使用 FilePond 类进行销毁是正确的。