文件上传适用于 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 请求正文中的多部分文件名相同，并且可以正常工作。 一个简单的错误花费一整天。