Filepond提交表单时自动触发本地预填充文件revert删除操作问题
Filepond预填充文件提交时自动触发revert删除的解决方案
该问题的根因为Filepond默认将未明确标记为永久存储的本地预填充文件识别为未绑定表单的临时文件,表单提交完成后会自动触发临时文件清理逻辑,调用revert接口执行删除。
可根据你的业务场景选择以下任意方案解决:
方案1:自定义revert处理逻辑过滤永久文件
在Filepond初始化配置中重写revert处理函数,判断待删除文件是否为预填充的永久文件,是则直接返回成功不执行删除,仅对用户本次上传的临时文件走原有删除逻辑,示例代码如下:FilePond.create(inputElement, { // 保留你原有的其他配置 server: { // 原有的process、load等服务配置不变,仅重写revert逻辑 revert: (uniqueFileId, load, error) => { // 这里可以从你预填充的文件列表中提取所有已存文件的source值,组成过滤名单 const permanentFileIdList = [1]; // 可根据实际返回的预填充数据动态生成 if (permanentFileIdList.includes(Number(uniqueFileId))) { load(); // 直接告知Filepond操作成功,不调用实际删除接口 return; } // 非预填充的临时文件走原有删除逻辑 fetch(`/your-revert-api/${uniqueFileId}`, { method: 'DELETE' }).then(res => res.ok ? load() : error('删除失败')) .catch(err => error(err.message)) } } })方案2:标记预填充文件为永久存储禁止删除
在你返回的预填充文件JSON结构中新增永久标记,再通过Filepond的删除前钩子拦截预填充文件的删除操作:
首先调整返回的JSON结构:'source' => 1, 'options' => [ 'type' => 'local', 'file' => [ 'name' => 'abc', 'size' => 100, 'type' => 'image/...', ], 'metadata' => [ 'poster' => 'file_path', 'permanent' => true // 新增永久存储标记 ], ],再修改Filepond初始化配置:
FilePond.create(inputElement, { // 保留原有其他配置 beforeRemoveFile: (file) => { // 带永久标记的预填充文件直接阻止删除逻辑 if (file.metadata?.permanent) { return false; } return true; } })方案3:全局关闭回滚功能(适合无需删除已上传文件的场景)
如果你的业务场景不支持用户删除已上传的文件,直接全局关闭revert功能即可:FilePond.create(inputElement, { allowRevert: false })
内容的提问来源于stack exchange,提问作者Anu Tig3r
相关产品推荐
相关产品推荐

