使用filepond文件上传器和另一个输入域将表单数据提交到后端

<form id="myForm" action="backend.php" method="POST">
  <input type="file" name="file" class="filepond" />
  <input type="text" name="data" />
  <button type="submit">提交</button>
</form>

// 初始化filepond文件上传器
FilePond.registerPlugin(FilePondPluginFileEncode);
const inputElement = document.querySelector('input[type="file"]');
const filepond = FilePond.create(inputElement);

// 监听表单提交事件
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  
  // 获取文件和其他输入域的值
  const file = filepond.getFile();
  const data = document.querySelector('input[name="data"]').value;
  
  // 创建FormData对象，将文件和其他数据添加到其中
  const formData = new FormData();
  formData.append('file', file.file);
  formData.append('data', data);
  
  // 发送AJAX请求到后端
  const xhr = new XMLHttpRequest();
  xhr.open('POST', form.action, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 请求成功处理逻辑
      console.log(xhr.responseText);
    }
  };
  xhr.send(formData);
});