上传 React 后删除 FilePond 文件

Question

好的，我已经无计可施了。我在使用 Hooks 的功能组件中使用 FilePond 和 React。我没有使用 FilePond 来处理实际的上传，只是设置文件的状态，我的简化版本是这样的：

档案池：

        <FilePond          
            onupdatefiles={fileItems => handleFilepondUpdate(fileItems)}            
          />
        </Form.Field>

句柄更新：

 const handleFilepondUpdate = fileItems => {
    if (fileItems.length === 0) {
      addAttachment({
        ...picture,
        bugAttachment: null
      });
    } else {
      addAttachment({
        ...picture,
        bugAttachment: fileItems[0].file
      });   
    }
  };

状态：

const [picture, addAttachment] = useState({
    bugAttachment: ""
  });
const { bugAttachment } = picture;

最后我上传并清除输入状态：

 const onSubmit = e => {
    e.preventDefault();
    const fd = new FormData();
    fd.append("email", props.user[0].email);
    fd.append("bugDescription", bugDescription);
    fd.append("bugAttachment", bugAttachment);
    addBug(fd).then(() => {
      setBug({
        bugDescription: ""
      });

    });
  };

那么，在发送表单后，我将如何删除 FilePond 文件？

Answer 1

尝试使用 addAttachment hook

清除 onSubmit 中的 bugAttachment 属性

 const onSubmit = e => {
    e.preventDefault();
    const fd = new FormData();
    fd.append("email", props.user[0].email);
    fd.append("bugDescription", bugDescription);
    fd.append("bugAttachment", bugAttachment);
    addBug(fd).then(() => {
      setBug({
        bugDescription: ""
      });
      addAttachment({
        ...picture,
        bugAttachment:""
      });  

    });
  };

更新：你的图片状态好像没有使用 files 道具，试试这个。

 <FilePond          
   files={bugAttachment}
   onupdatefiles={fileItems => handleFilepondUpdate(fileItems)}            
   />

上传 React 后删除 FilePond 文件

Removing FilePond file after upload React

reactjs

react-hooks

filepond