FormData发送文件+数据

Question

我试图上传一些表单数据和文件到REST端点。我写了下面的代码 -

$(document).ready(function() { 

    var data = new FormData(); 

    //upload file append to formdata 
    $("#catItemData #uploadC").on('change', function(){ 
      $this = $(this); 
      var file = $this[0].files[0]; 
      data.append("xlsx",file);    

//input fields append to formdata 
    $("#catItemData #catSubmit").click(function(){ 
     var formD = { 
       name: $("#name").val(), 
       type: $("#type").val() 
     }; 
     for (var key in formD) { 
      data.append(key, formD[key]); 
     }  
     $.ajax({    
       type: "POST", 
       url: "http://localhost:8086/service/create",   
       data: data, 
       contentType: false, 
       cache: false, 
       processData: false, 
       success: function(response, status, xhr) { 
         //response 
        } 
       }); 
     }); 
    }); 

然而，这并不上传任何文件内容，并给了我一个415不支持的媒体类型的错误。这是有效载荷的样子 -

------ WebKitFormBoundaryANhANgazbC1YNo1u Content-Disposition：form-data; NAME = “XLSX”;文件名= “testfile.xlsx” 内容类型：应用/ vnd.openxmlformats-officedocument.spreadsheetml.sheet

------ WebKitFormBoundaryANhANgazbC1YNo1u 内容处置：形状数据;名称= “名称”

你好

------ WebKitFormBoundaryANhANgazbC1YNo1u 内容处置：形状数据;名称=“类型”

平台

什么我可能错过了这里？任何帮助，高度赞赏。

Answer 1

您必须在方法下声明data变量，如果没有对该文件的更改进行任何验证，则不需要change文件输入事件。点击功能下不需要var formD。只需你的代码应该是这样的。

$(document).ready(function() { 



    $("#catItemData #catSubmit").click(function(){ 
     var data = new FormData(); 
     data.append('name', $("#name").val()); 
     data.append('type', $("#type").val()); 
     data.append("xlsx",$('#uploadC')[0].files[0]); 
     $.ajax({    
       type: "POST", 
       url: "http://localhost:8086/service/create",   
       data: data, 
       contentType: false, 
       cache: false, 
       processData: false, 
       success: function(response, status, xhr) { 
         //response 
        } 
       }); 
     }); 
    });