Question

我将FilePond（通过React）配置为上传多个文件，以便在后端接收这些文件，存储它们并在重新访问页面时正确显示它们。

let server = {
  url: '/mypath',
  process: '/mypath',
  revert: '/mypath'
};

<FilePond
  server={server}
  allowMultiple={true}
  allowRevert={true}
  files={current_files}
/>

使用Python后端，可以很好地用于上传：

if request.method == "POST":
    # handle request.FILES.get("filepond")

现在，我想实现DELETE，因此我将allowRemove={true}添加到FilePond实例，并将revert: /path添加到server配置。我希望发生的是，当用户单击X时，FilePond发送一个DELETE请求。但是什么也没发生-用户单击X根本不会向注册的端点发送 any 请求。我确实发现我可以添加：

onremovefile={(file) => handleRemove(file)}

，如果我创建一个handleRemove() React函数，则使用file对象调用它。但这似乎很骇人-是否不应该单击X自动联系已注册的端点？

我应该继续从handleRemove()函数手动发送DELETE，还是我在配置中丢失了某些内容？该文档暗示，在服务器对象上定义revert时，“还原”操作将触发DELETE。

Answer 1

<FilePond server={'./api'}>

当FilePond要上传文件时，它会向POST发送./api请求

当FilePond要还原文件上传时，它会向DELETE发送一个./api请求

allowRemove不存在（也许您打算写allowRevert？）。

要将还原请求发送到另一个端点，可以将另一个URL传递到revert对象的server属性。

<FilePond server={{ url:'./api', revert:'/revert' }>

现在FilePond调用./api来上传文件，并调用./api/revert来还原文件。

Answer 2

尝试 useRef 钩子。

此示例是文件成功上传后将立即删除的示例。

这应该适用于您的情况。

const filePondRef = useRef(null)
<FilePond ref={filePondRef} onprocessfile={handleOnProcessFile}/>

然后在您的 onprocessfile 处理程序中

const handleOnProcessFile = (error, file) => {
  if (error) {
    return;
  }

  filePondRef.current.removeFile(file);
};

Answer 3

我已经解决了很长时间，但是我想出了成功更新后手动删除列表项的方法。

 onload: (response) => {
          setTimeout(() => {
                $("li").remove("[data-filepond-item-state=processing-complete]");
             }, 1500);

       },

如何使用FilePond触发文件删除

3 个答案: