表单上传文件到需要自定义标题的Web API

Question

我有一个标准的HTML表单，要求用户上传文件。

<form id="uploadForm" action="http://localhost:5000/api/collection/csv" method="post" enctype="multipart/form-data" >
  <div class="form-group">
    <div class="col-md-10">
      <p>Upload one or more files using this form:</p>
      <input type="file" name="files" multiple />                       
    </div>
  </div>
</form>

仅此一项就可以正常工作，但是API需要一个类似于以下内容的授权标头：

Authorization: Bearer eyJhb.......

Web API是ASP.Net Web API，它期望标头，内容类型multipart/form-data ，并具有适当的webkit- boundary作为POST提交的一部分。

我在网上搜索过，似乎无法将自定义标题添加到表单提交中。 还有另一种方法可以使用自定义标头正确上传此文件吗？

Answer 1

对我有用的答案是@Musa在评论中建议的内容。

我需要使用jQuery的表单submit事件，因此我可以创建一个FormData对象并使用Ajax提交该对象。

在这种情况下，解决方案是：

$("#uploadForm").on( "submit", function( event ) {
    event.preventDefault();
    var form = $(this)[0];
    var postData = new FormData(form);
    $.ajax({
        type: "POST",
        url: "http://localhost:5000/api/collection/csv",
        beforeSend: function(request) {
          //ADD CUSTOM HEADER HERE
          request.setRequestHeader("Authorization", "Bearer " + idToken);
        },
        data: postData,
        contentType: false, //THIS IS REQUIRED 
        processData: false, //THIS IS REQUIRED
        success: function(data){
          //Handle success here
          resolve(data);
        },
        error: function (xhr, textStatus, error) {
           //Handle error
           reject(error);
        }
      });
});

我不确定为什么为什么需要contentType: false, processData: false ，但是如果没有它就无法工作。