文件上传正在使用 Postman，但不适用于从浏览器运行的 Javascript答案

【问题标题】：File Upload is working with Postman but not with Javascript running from browser文件上传正在使用 Postman，但不适用于从浏览器运行的 Javascript
【发布时间】：2020-11-19 23:14:24
【问题描述】：

我正在通过 AJAX、Javscript 和 Spring MVC 控制器进行文件上传，并且在这个过程控制器中能够读取从 Postman 传递的文件，但不能从浏览器中运行的 Javascript 和 AJAX 读取。

邮递员详细信息在下面的屏幕截图中。

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");              
             }
            });
        
        }
     
}

来自 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 请求中遗漏了什么？

【问题讨论】：

浏览器控制台有错误吗？
我没有在浏览器中看到任何错误。如果我查看 Controller log ，我看到文件已找到，但是当我尝试打印时，它显示为 null 而不是 org.springframework.web.multipart.commons.CommonsMultipartFile@b67a7f0 ，如 Postman 请求中所示。
我认为 getElementById 不返回数组。为什么这不会导致控制台错误？
文件正在发送到 Controller 。根据日志，我看到它正在被发现。问题是为什么当从浏览器发送而不是从 Postman 发送时无法读取它

标签： javascript java jquery ajax spring

【解决方案1】：

我已修复它，因为我在通过 AJAX 发送它时使用了错误的文件名，因为它与 Controller 中的 Multipart 文件名不匹配。由于这个原因，文件未被识别。现在文件名已更改为与控制器请求正文中的多部分文件名相同，并且可以正常工作。一个简单的错误会花费 1 天时间。

【讨论】：