Ask for help: why did the froala rich text editor insert the image and upload it to the server twice?

problem description

official demo test, after setting the imageUploadURL parameter using froala, as shown below:

clipboard.png

OPTIONS;POSTfile
:

clipboard.png

clipboard.png

:

clipboard.png
:

clipboard.png

Why are there two requests? Is it normal to make two requests? Does the server want to judge whether the corresponding data is brought and then write to the file?
in addition, can you set some parameters to define the name of the field that inserts the picture data and convert the format of the picture data?

the platform version of the problem and what methods you have tried

if you look at the document, you can set imageParams to bring the custom parameters, but you can"t find a way to set the parameters related to the inserted image.
try to see the code in < script type= "text/javascript" src= " https://cdnjs.cloudflare.com/.;></script>, but it is not good enough to understand, how to set the request parameters and how to send the request.

related codes

/ / Please paste the code text below (do not replace the code with a picture)
the code of the html file, using the official Froala demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <!-- Include external CSS. -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"
        type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">

    <!-- Include Editor style. -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.5/css/froala_editor.pkgd.min.css" rel="stylesheet"
        type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.5/css/froala_style.min.css" rel="stylesheet"
        type="text/css" />
</head>

<body>
    <!-- Create a tag that we will use as the editable area. -->
    <!-- You can use a div tag as well. -->
    <textarea></textarea>

    <!-- Include external JS libs. -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>

    <!-- Include Editor JS files. -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.5/js/froala_editor.pkgd.min.js"></script>

    <!-- Initialize the editor. -->
    <script> 
    $(function () { $("textarea").froalaEditor({
        imageUploadURL:"http://localhost/test/public/index.php/test/Test/uploadFile",//

    })}); 
    
    </script>
</body>

</html>

Code of local test address

    public function uploadFile(){
        header("Access-Control-Allow-Origin:*");
        if(!isset($_FILES["file"])){
            halt($_FILES);
        }
        
        dump($_POST);dump($_GET);
        halt($_FILES);
    }
Sep.16,2021
Menu