我将使用 ajax 将图像上传到 Spring Boot 端点

Question

这是我的html 表单，当serialize 这个表单并将formdata 发送到spring boot 端点时，它会给出400 错误，并且浏览器中没有文件名及其值检查为什么会发生这种情况？

我正在使用Thymeleaf 生成模板。为什么我的表单数据没有文件名和值？

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

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>

        <form class="md-float-material form-material" id="schoolRegForm" method="post" enctype="multipart/form-data">
            <!--<form id="schoolDetailsForm" enctype="multipart/form-data">-->
            <!--school logo preview-->
            <div class="form-group row justify-content-center">
                <div class="avatar centered box-shadow" style="height: 200px;width: 200px;border-radius: 200px;border: 2px solid white">
                    <img id="schoolLogoPreview" th:src="@{/dist/images/default-image.png}" src="" alt="School Logo" style="height: 200px;width: 200px;border-radius: 200px;border: none"
                    />
                </div>
            </div>


<!--this is place that my issue comes-->
            <!--school logo-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="">
                                                    School Logo &nbsp;&nbsp;
                                                </label>
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="input-group">
                                <div class="custom-file">
                                    <input class="" type="file" accept="image/*" id="schoolLogoInput" name="schoollogofile">
                                    <label class="custom-file-label" for="schoolLogoInput">Choose
                                                                        file</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-sm-12">
                            <label id="schoolLogoValidateNotify" class="text-danger d-none">
                                                                <i class="fa wr"></i> Image is correct
                                                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- student image select -->

            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="student-image">
                                                    Student Image
                                                </label>
                <div class="col-lg-6">
                    <div class="input-group">
                        <input id="student-image" type="file" class="form-control" accept="image/*" onchange="loadCertificate(event)" name="photopathfile">

                    </div>
                </div>
            </div>

            <!-- student image preview -->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="">
                                                    Uploaded Image Preview
                                                </label>
                <div class="col-lg-6">
                    <div class="avatar">
                        <img class="img-thumbnail" id="studentbirthCertificatePreview" style="width: 250px" />
                    </div>
                </div>
            </div>


            <!--school name-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolNameInput">
                                                    School Name <span class="text-danger">*</span>
                                                </label>
                <div class="col-lg-6">
                    <input id="schoolNameInput" type="text" class="form-control" name="schoolname" placeholder="school name">
                    <span id="schoolNameErrorMessage" class=""></span>
                </div>
            </div>

            <!--school address-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolAddressInput">
                                                    School Address
                                                    <span class="text-danger">*</span>
                                                </label>
                <div class="col-lg-6">
                    <textarea id="schoolAddressInput" type="textarea" class="form-control" name="schooladdress" placeholder="school address"
                        style="height: 100px;"></textarea>
                        <span id="schoolAddressErrorMessage" class=""></span>
                </div>
            </div>

            <!--school province-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolProvinceInput">
                                                    Province
                                                    <span class="text-danger">*</span>
                                                </label>
                <div class="col-lg-6">
                    <!-- school division input-->
                    <select id="schoolProvinceInput" class="form-control" onchange="setDistrictOptions(this.value)" name="schoolprovince">
                                                        <option value="Central">Central Province</option>
                                                        <option value="Eastern">Eastern Province</option>
                                                        <option value="North Central">North Central Province</option>
                                                        <option value="Northern">Northern Province</option>
                                                        <option value="North Western">North Western Province</option>
                                                        <option value="Sabaragamuwa">Sabaragamuwa Province</option>
                                                        <option value="Southern">Southern Province</option>
                                                        <option value="Uva">Uva Province</option>
                                                        <option value="Western">Western Province</option>
                                                    </select>
                    <span id="schoolProvinceErrorMessage" class=""></span>
                    <!--                                            <input id="schoolProvinceInput" type="text" class="form-control mt-2"-->
                    <!--                                                   name="schooldivision" placeholder="Enter province here">-->
                    <!--                                            <span id="schoolDivisionErrorMessage" class=""></span>-->
                </div>
            </div>

            <!--school district-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolDistrictInput">
                                                    District
                                                    <span class="text-danger">*</span>
                                                </label>
                <div class="col-lg-6">
                    <select id="schoolDistrictInput" class="form-control" name="schooldistrict">

                                                    </select>
                    <span id="schoolDistrictErrorMessage" class=""></span>
                    <!--                                            <input id="schoolDistrictInput" type="text" class="form-control mt-2"-->
                    <!--                                                   name="schooldistrict" placeholder="Enter district here">-->
                </div>
            </div>

            <!--school division-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolDivisionInput">
                                                    Division
                                                    <span class="text-danger">*</span>
                                                </label>
                <div class="col-lg-6">
                    <select id="schoolDivisionInput" class="form-control" name="schooldivision">
                                                    </select>
                    <!--                                        <input id="schoolDivisionInput" type="text" class="form-control mt-2"-->
                    <!--                                               name="schooldivision" placeholder="Enter division here">-->
                    <!--                                            <span id="schoolProvinceErrorMessage" class=""></span>-->
                </div>
            </div>

            <!--school region-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolRegion">
                                                    School Region
                                                </label>
                <div class="col-lg-6">
                    <input id="schoolRegion" type="text" class="form-control" name="schoolregion" placeholder="Enter region here">
                    <span id="schoolRegionErrorMessage" class=""></span>
                </div>
            </div>

            <!--school vision-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolVisionInput">
                                                    School Vision
                                                </label>
                <div class="col-lg-6">
                    <textarea id="schoolVisionInput" type="textarea" class="form-control" name="schoolvision" placeholder="Enter vision here"
                        style="height: 100px"></textarea>
                        <span id="schoolVisionErrorMessage" class=""></span>
                </div>
            </div>

            <!--school mission-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolMissionInput">
                                                    School Mission
                                                </label>
                <div class="col-lg-6">
                    <textarea id="schoolMissionInput" type="textarea" class="form-control" name="schoolmission" placeholder="Enter mission here"
                        style="height: 100px"></textarea>
                        <span id="schoolMissionErrorMessage" class=""></span>
                </div>
            </div>

            <!--school email-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolEmailInput">
                                                    School Email
                                                </label>
                <div class="col-lg-6">
                    <input id="schoolEmailInput" type="email" class="form-control" name="schoolemail" placeholder="school email">
                    <span id="schoolEmailErrorMessage" class=""></span>
                </div>
            </div>

            <!--school contact no1-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolContactNoInput1">
                                                    School Contact Number
                                                    <span class="text-danger">*</span>
                                                </label>
                <div class="col-lg-6">
                    <input id="schoolContactNoInput1" type="text" class="form-control" name="schooltelephone" placeholder="school contact number 01">
                    <span id="schoolContactNo1ErrorMessage" class=""></span>
                </div>
            </div>

            <!--school contact no2-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolContactNoInput2">
                                                </label>
                <div class="col-lg-6">
                    <input id="schoolContactNoInput2" type="text" class="form-control" name="schooltelephonsecond" placeholder="school contact number 02">
                    <span id="schoolContactNo2ErrorMessage" class=""></span>
                </div>
            </div>

            <!--school grade span -->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolGradeSpanInput">
                                                    School Grade Span <span class="text-danger">*</span>
                                                </label>
                <div class="col-lg-6">
                    <input id="schoolGradeSpanInput" type="text" class="form-control" name="gradespan" placeholder="Enter Grade here">
                    <span id="schoolGradeSpanErrorMessage" class=""></span>
                </div>
            </div>

            <!--school number-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolNumberInput">
                                                    School Number <span class="text-danger">*</span>
                                                </label>
                <div class="col-lg-6">
                    <input id="schoolNumberInput" type="number" class="form-control" name="schoolnumber" placeholder="Enter number here">
                    <span id="schoolNumberErrorMessage" class=""></span>
                </div>
            </div>

            <!-- School Census -->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolCensusInput">
                                                    School Census
                                                </label>
                <div class="col-lg-6">
                    <input id="schoolCensusInput" type="number" class="form-control" name="schoolcensusnumber" placeholder="Enter school census">
                    <span id="schoolStudentPopulationErrorMessage" class=""></span>
                </div>
            </div>

            <!--school type-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolTypeInput">
                                                    School Type
                                                </label>
                <div class="col-lg-6">
                    <select id="schoolTypeInput" type="text" class="form-control" name="schooltype">
                                                        <option selected value="National"> National</option>
                                                        <option value="Type 1AB"> Type 1C</option>
                                                        <option value="Type 1AB"> Type 2</option>
                                                        <option value="Type 1AB"> Type 3</option>
                                                    </select>
                </div>
            </div>

            <!--school anthem-->
            <div class="form-group row">
                <label class="col-lg-4 col-form-label" for="schoolAnthemInput">
                                                    School Anthem
                                                </label>
                <div class="col-lg-6">
                    <textarea id="schoolAnthemInput" type="textarea" class="form-control" name="schoolanthem" placeholder="Enter School Anthem"
                        style="height: 100px"></textarea>
                        <span id="schoolAnthemErrorMessage" class=""></span>
                </div>
            </div>

            <div class="form-group row">
                <div class="col-lg-8 ml-auto">
                    <!--save button-->
                    <button id="saveSchoolDetails" type="button" class="btn btn-success m-2">
                                                        <i class="fa fa-check"></i> Save Settings
                                                    </button>

                    <!-- go back button-->
                    <label id="goBackButton" class="text-info m-2">
                                                        <i class="fa fa-backward"></i> Go back to Register
                                                    </label>
                </div>
            </div>
        </form>
    </body>

    </html>

这是我的 ajax 调用

$.ajax({
                type: "POST",
                enctype: 'multipart/form-data',
                url: baseURL + 'register',
                data: newForm ,
                // + '&schoollogofile=' + file,   // 
                dataType: 'json',
                async:true,
                // processData: false,
                // contentType: false,
                success: function (data) {
                    alert("registered" + data);
                },

            }).done(function (data) {
                alert(data);
            });

Answer 1

最后我发现了问题，感谢这一切都是 ajax 调用

 function registerSchoolAndAdmin() {


                let schoolRegForm = $('#schoolRegForm')[0];
                // var formData = new FormData(document.forms['form-ship']); // with the file input
                let formData = new FormData(schoolRegForm);
                let poData = $(document.forms['signUpForm']).serializeArray();
                for (let i=0; i<poData.length; i++)
                    formData.append(poData[i].name, poData[i].value);

                $.ajax({
                    type: "POST",
                    url: baseURL + 'register',
                    data: formData ,
                    // dataType: 'json',
                    async:true,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        let adminid = analizeResponse(data);
                        console.log("adminID" + adminid);
                        locateMethod(data);
                    },
                }).done(function (data) {
                    alert(data);
                });
            }