jquery - 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 内容处置:表单数据；名称=“xlsx”；文件名=“测试文件.xlsx” 内容类型:application/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
                    }
              });   
      });
  });