0

我将 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 根本不会向注册的端点发送任何请求。我确实发现我可以添加：

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

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

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

4

3 回答 3

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恢复文件。

于 2019-02-14T06:39:14.057 回答
1

试试useRef钩子。

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

这应该适用于您的情况。

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

然后在你的onprocessfile处理程序里面

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

  filePondRef.current.removeFile(file);
};
于 2021-01-11T10:16:05.123 回答
0

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

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

       },
于 2020-07-31T12:21:28.213 回答