如何为需自定义Authorization Header的Web API实现表单文件上传

嘿，这个问题我刚好碰到过！原生HTML表单确实没法直接自定义请求头，不过用JavaScript就能轻松解决。下面给你两种常用的实现方式：

原生HTML表单提交时没法手动添加自定义请求头，所以我们需要通过JavaScript拦截表单的提交行为，用Fetch API或者XMLHttpRequest来发送请求，这样就能自由设置Authorization头了。

方法一：使用Fetch API（推荐，现代浏览器支持） #

先给你的表单补上提交按钮（原代码里没包含，实际使用需要），再添加监听提交事件的JS代码：

<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 />
      <!-- 新增提交按钮 -->
      <button type="submit">上传文件</button>
    </div>
  </div>
</form>

<script>
document.getElementById('uploadForm').addEventListener('submit', async (e) => {
  // 阻止表单默认提交行为，不然会绕过我们的自定义逻辑
  e.preventDefault();
  
  // 获取表单实例并构建FormData对象
  const form = e.target;
  const formData = new FormData(form);
  
  // 替换成你实际的授权令牌，比如Bearer xxxxxxxx格式
  const authToken = '你的Authorization令牌内容';
  
  try {
    const response = await fetch(form.action, {
      method: form.method,
      headers: {
        // 添加自定义Authorization请求头
        'Authorization': authToken
        // 注意：不要手动设置Content-Type为multipart/form-data，Fetch会自动处理带边界符的正确头
      },
      body: formData
    });
    
    // 处理上传响应
    if (response.ok) {
      alert('文件上传成功！');
      // 这里可以加后续逻辑，比如刷新页面、展示上传结果等
    } else {
      const errorInfo = await response.text();
      alert(`上传失败: ${errorInfo}`);
    }
  } catch (error) {
    console.error('请求出现异常:', error);
    alert('上传请求出错，请检查网络连接');
  }
});
</script>

核心注意点： #

• 必须调用e.preventDefault()阻止原生提交，不然自定义请求头不会生效
• 绝对不要手动设置multipart/form-data类型的Content-Type，Fetch会自动生成包含边界符的正确请求头，手动设置反而会导致后端无法解析文件

方法二：使用XMLHttpRequest（兼容老浏览器） #

如果需要支持IE这类老浏览器，可以用XHR来实现：

<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 />
      <button type="submit">上传文件</button>
    </div>
  </div>
</form>

<script>
document.getElementById('uploadForm').addEventListener('submit', (e) => {
  e.preventDefault();
  
  const form = e.target;
  const formData = new FormData(form);
  const authToken = '你的Authorization令牌内容';
  
  const xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action);
  
  // 添加Authorization请求头
  xhr.setRequestHeader('Authorization', authToken);
  
  // 监听请求完成事件
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      alert('文件上传成功！');
    } else {
      alert(`上传失败: ${xhr.responseText}`);
    }
  };
  
  // 监听请求错误事件
  xhr.onerror = function() {
    console.error('请求出错');
    alert('上传请求发生错误，请检查网络连接');
  };
  
  // 发送FormData数据
  xhr.send(formData);
});
</script>

验证方式 #

你可以打开浏览器开发者工具（F12），切换到Network标签，找到上传请求，查看Headers面板，确认Authorization头已经被正确添加到请求中。

内容的提问来源于stack exchange，提问作者edkek