文件上傳適用於 Postman 但不適用於從瀏覽器運行的 Javascript

Question

I am working on file upload via AJAX,Javscript and Spring MVC Controller and in this Process Controller is able to read the file which is passed from Postman but not from Javascript and AJAX running in the browser.

Postman 詳細信息在下面的屏幕截圖中。

Controller Postman 請求的日志如下所述。

2020-07-30 10:24:01,670 [http-nio-8080-exec-541] DEBUG o.s.web.servlet.DispatcherServlet - DispatcherServlet with name 'Search' processing POST request for [/bulkuploadreportstg]
2020-07-30 10:24:01,695 [http-nio-8080-exec-541] DEBUG o.s.w.m.c.CommonsMultipartResolver - Found multipart file [blreportexcel] of size 11856 bytes with original filename [BerichtInfo_Datei_Export_201973112055.xlsx], stored at [D:\DTS\Apache_8.5.43\work\Catalina\localhost\upload_113af7dc_1739a8f843a__7fe8_00000001.tmp]
2020-07-30 10:24:01,695 [http-nio-8080-exec-541] DEBUG o.s.w.s.m.m.a.RequestMappingHandlerMapping - Looking up handler method for path /bulkuploadreportstg
2020-07-30 10:24:01,695 [http-nio-8080-exec-541] DEBUG o.s.b.f.s.DefaultListableBeanFactory - Returning cached instance of singleton bean 'BulkUploadController'
2020-07-30 10:24:01,757 [http-nio-8080-exec-541] INFO   Received file to upload the data into staging table is:org.springframework.web.multipart.commons.CommonsMultipartFile@b67a7f0
2020-07-30 10:24:01,757 [http-nio-8080-exec-541] INFO   I am inside bulk upload stage controller
2020-07-30 10:24:01,757 [http-nio-8080-exec-541] DEBUG o.s.web.servlet.DispatcherServlet - Null ModelAndView returned to DispatcherServlet with name 'Search': assuming HandlerAdapter completed request handling
2020-07-30 10:24:01,757 [http-nio-8080-exec-541] DEBUG o.s.w.m.c.CommonsMultipartResolver - Cleaning up multipart file [blreportexcel] with original filename [BerichtInfo_Datei_Export_201973112055.xlsx], stored at [D:\DTS\Apache_8.5.43\work\Catalina\localhost\upload_113af7dc_1739a8f843a__7fe8_00000001.tmp]
2020-07-30 10:24:01,757 [http-nio-8080-exec-541] DEBUG o.s.web.servlet.DispatcherServlet - Successfully completed request

下面是 HTML 組件和相應的 JQUERY 和 AJAX。

<div class="container-fluid">
    <div class="card">
                    <div class="card-header bg-info">
                        BERICHT DATEI IMPORTIEREN
                    </div>
                    <div class="card-body">
                            <form id="blkuploadform2" enctype="multipart/form-data">
                                <div class="form-group">
                                            <h6>Datei Importieren Method :</h6>
                                            <p>Diese Seite wird verwendet, um die Datei mit 1 oder mehr als 1 Berichtsdatensätzen gleichzeitig in die Datenbank hochzuladen.</p>
                                            <br>
                                            <input type="file" id="blkUploadReport2" name="blkUploadReport2">  <span class="fas fa-asterisk"></span>
                                </div>
                            </form>
                            <div class="col-sm-offset-2 col-sm-6">
                                    <button class="btn btn-success btn-raised btn-sm" id="saveEdit2" onClick="bulkupdValidator2()">
                                        IMPORTIEREN <span class="fas fa-save"></span> 
                                    </button>                   
                            </div>
                    </div>
        </div>
</div>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">            
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel1">Bestätigung</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>            
                <div class="modal-body">
                   <p>Sie sind im Begriff Berichtsdaten zu speichern. Möchten Sie fortfahren?</p>                    
                </div>                
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">NEIN</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal" onClick="blksavedata('report')">JA</button>
                </div>
            </div>
        </div>
</div>
<div class="modal fade" id="error-message" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">            
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel2">Fehler</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>            
                <div class="modal-body">
                   <p id="error"></p>                    
                </div>                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>
                </div>
            </div>
        </div>
</div>
<div class="modal fade" id="success-message" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">            
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel3">Erfolg</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>            
                <div class="modal-body">
                   <p id="success"></p>                   
                </div>                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>
                </div>
            </div>
        </div>
</div>

//Function to validate the File input using method 2.
function bulkupdValidator2(){
    if($('#blkuploadform2').valid()){
        $('#confirm-save').modal('show');
        console.log("I am success");
    }
    else{
        document.getElementById("error").innerText="Bitte füllen Sie die erforderlichen Felder mit rotem Text aus.";
         $('#error-message').modal('show');
    }
    
}

$(document).ready(function(){
    $('#blkuploadform2').validate({
        rules:{
            blkUploadReport2:{
                required:true,
                extension:'xlsx'
            }
        },
        messages:{
            blkUploadReport2:{
                required:"Bitte laden Sie die Datei im gewünschten Format (.xlsx) hoch.",
                extension:"Bitte laden Sie die Datei im gewünschten Format (.xlsx) hoch."
            }
        }
    })
})

//Function to Validate the data from uploaded file and load them into staging tables accordingly.

function blksavedata(typeOfData){

    $('#confirm-save').modal('hide');
    var fileInput=document.getElementById("blkuploadform2");
    var form=new FormData();
    console.log(fileInput[0].files[0]);
    console.log(fileInput[0].files[0].name);
    form.append('file',fileInput[0].files[0],fileInput[0].files[0].name);
    var fileType=typeOfData;
    
    if (fileType=='report')
        {
         $.ajax({
             type:"POST",
             url:"/DTSDBL/bulkuploadreportstg",
             data:form,
             processData: false,
             contentType: false,
             success:function(data){                
                console.log("I am success returned form controller");                                                
             },
             error:function(e){
                console.log("I am error returned form controller");              
             }
            });
        
        }
     
}

Controller 記錄來自 Javascript 和 Ajax 的請求：

2020-07-30 10:23:18,388 [http-nio-8080-exec-535] DEBUG o.s.web.servlet.DispatcherServlet - DispatcherServlet with name 'Search' processing POST request for [/bulkuploadreportstg]
2020-07-30 10:23:18,435 [http-nio-8080-exec-535] DEBUG o.s.w.m.c.CommonsMultipartResolver - Found multipart file [file] of size 11856 bytes with original filename [BerichtInfo_Datei_Export_201973112055.xlsx], stored at [D:\DTS\Apache_8.5.43\work\Catalina\localhost\\upload_113af7dc_1739a8f843a__7fe8_00000000.tmp]
2020-07-30 10:23:18,435 [http-nio-8080-exec-535] DEBUG o.s.w.s.m.m.a.RequestMappingHandlerMapping - Looking up handler method for path /bulkuploadreportstg
2020-07-30 10:23:18,435 [http-nio-8080-exec-535] DEBUG o.s.b.f.s.DefaultListableBeanFactory - Returning cached instance of singleton bean 'BulkUploadController'
2020-07-30 10:23:18,450 [http-nio-8080-exec-535] DEBUG o.s.web.cors.DefaultCorsProcessor - Skip CORS processing: request is from same origin
2020-07-30 10:23:18,450 [http-nio-8080-exec-535] INFO  DTSDB - Received file to upload the data into staging table is:null
2020-07-30 10:23:18,450 [http-nio-8080-exec-535] INFO  DTSDB - I am inside bulk upload stage controller
2020-07-30 10:23:18,481 [http-nio-8080-exec-535] DEBUG o.s.web.servlet.DispatcherServlet - Null ModelAndView returned to DispatcherServlet with name 'Search': assuming HandlerAdapter completed request handling
2020-07-30 10:23:18,481 [http-nio-8080-exec-535] DEBUG o.s.w.m.c.CommonsMultipartResolver - Cleaning up multipart file [file] with original filename [BerichtInfo_Datei_Export_201973112055.xlsx], stored at [D:\DTS\Apache_8.5.43\work\Catalina\localhost\\upload_113af7dc_1739a8f843a__7fe8_00000000.tmp]
2020-07-30 10:23:18,481 [http-nio-8080-exec-535] DEBUG o.s.web.servlet.DispatcherServlet - Successfully completed request

請在這里幫助我，我在 Javascript 和 Ajax 請求中缺少什么？

Answer 1

我已修復它，因為我在通過 AJAX 發送它時使用了錯誤的文件名，因為它與 Controller 中的多部分文件名不匹配。 由於這個原因，文件未被識別。 現在文件名已更改為與 Controller 請求正文中的多部分文件名相同，並且可以正常工作。 一個簡單的錯誤花費一整天。