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：表单数据；姓名="xlsx"；文件名="testfile.xlsx" 内容类型：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

------WebKitFormBoundaryANhANgazbC1YNo1u Content-Disposition：表单数据；姓名="name"

你好

------WebKitFormBoundaryANhANgazbC1YNo1u Content-Disposition：表单数据；名字="type"

平台

我在这里可能遗漏了什么？非常感谢任何帮助。

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

FormData发送文件+数据

FormData to send file+data

jquery

ajax

multipartform-data

form-data

asyncfileupload