如何通过htmx.ajax的POST请求正确发送文件？

嘿，我之前也碰到过一模一样的问题！你现在的代码思路没问题，但有个关键细节没处理到位——htmx默认会给POST请求设置application/x-www-form-urlencoded的Content-Type头，而上传文件需要用multipart/form-data类型，还得让浏览器自动生成请求头里的分隔符（boundary），这就是文件没被正确包含在请求里的原因。

给你两种解决办法，按需挑选就行：

方法一：修正你现有的JavaScript代码 #

只需要在htmx.ajax的配置里，告诉htmx不要手动设置Content-Type，让浏览器自动处理FormData的请求头：

<!-- file input element -->
<input type="file" id="file-input">

<!-- upload button element -->
<button id="upload-button">Upload</button>

<!-- script to handle the upload logic -->
<script>
// get the file input element
var fileInput = document.getElementById("file-input");
// get the upload button element
var uploadButton = document.getElementById("upload-button");

// listen for the click event on the upload button
uploadButton.addEventListener("click", function() {
  // get the file object from the input
  var file = fileInput.files[0];
  if (!file) {
    alert("请先选择文件！");
    return;
  }
  // create a form data object
  var formData = new FormData();
  // append the file to the form data
  formData.append("file", file);

  // 修正后的htmx请求配置
  htmx.ajax("POST", "/upload", {
    body: formData,
    // 让浏览器自动生成multipart/form-data的请求头（包含boundary）
    headers: { 'Content-Type': false },
    // 明确指定编码类型，也可以不加，但加上更清晰
    enctype: 'multipart/form-data'
  });
});
</script>

修改后，浏览器会自动为FormData设置正确的multipart/form-data; boundary=xxx请求头，文件就能正常传到后端了。

方法二：用htmx原生属性更省心 #

其实htmx本身就支持表单文件上传，完全不用写这么多JS，直接用hx-post和hx-enc属性就行，更符合htmx的声明式风格：

<form hx-post="/upload" hx-enc="multipart/form-data">
  <input type="file" name="file" id="file-input">
  <button type="submit">Upload</button>
</form>

这样点击按钮时，htmx会自动收集表单里的文件，用正确的编码类型发送请求，代码简洁还不容易出错~

备注：内容来源于stack exchange，提问作者darna