Question

我使用 filepond 在服务器上发送单个图像，对其进行处理，然后将处理后的数据取回。

当我使用filepond按钮删除当前显示的图像并添加一个新图像时，我发现它实际上只是从显示中删除，因为fetch方法的结果为我提供了与上载一样多的结果以前的图片。

如何完全删除filepond删除项按钮上的图像？

// register the plugins with FilePond
    FilePond.registerPlugin(
        FilePondPluginImagePreview,
        FilePondPluginImageResize,
        FilePondPluginImageTransform,
        FilePondPluginFileEncode
    );

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


    const pond = FilePond.create(inputElement, {
        // add onaddfile callback
        onaddfile: (err, fileItem) => {

            const im64 = fileItem.getFileEncodeBase64String();


            if (document.getElementById('fetchUserDataBtn')) {

                document.getElementById('fetchUserDataBtn').addEventListener('click', fetchUserData);

                function fetchUserData() {


                    fetch('http://127.0.0.1:8000/classify/api/', {
                        method: 'POST',

                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: im64,

                        dataType: 'json',

                    })
                        .then(result => result.json())
                        .then(data => {
                            console.log(data);
                        })

                }

            }
        }


    });

<!DOCTYPE html>
<html lang="en">

<head>


  <title>FilePond from CDN</title>

  <!-- Filepond stylesheet -->
  <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
  <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">

</head>
<body>

  <!-- We'll transform this input into a pond -->
  <input type="file">


</body>


  <!-- Load FilePond library -->
    <!-- Add plugin scripts -->
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js"></script>

    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

    <button id="fetchUserDataBtn">Fetch User Data</button>





</html>

使用filepond删除文件

0 个答案: