使用FilePond开发上传页面：如何随表单数据提交文件元数据

嘿，我懂你现在的困扰——已经能拿到输入框的元数据，但不知道怎么把它和文件一起提交到后端对吧？其实只需要把元数据绑定到对应的文件项上，然后在提交阶段从文件项里取出来加到表单数据里就行，我给你一步步拆解：

步骤1：在onaddfile中保存元数据到文件项 #

当文件添加进来时，你已经通过item.getMetadata()拿到了自定义元数据，这时候把它存到文件item的自定义属性里，方便后续提交时调用：

pond.onaddfile = (err, item) => {
  console.log(item);
  const metadata = item.getMetadata();
  console.log(metadata);
  // 把自定义元数据存到文件项的自定义属性中
  item.customAdditionalMeta = metadata.additional;
}

步骤2：在ondata回调中取出元数据并添加到FormData #

ondata函数其实有第二个隐藏参数fileItem——就是当前正在处理的文件项，你可以用它取出之前存的元数据，追加到FormData里：

pond = FilePond.create(document.querySelector('#img'),{
  server: {
    process: {
      url: 'opbouw/model/post/addimg.php',
      ondata: (formData, fileItem) => {
        // 保留你原本要提交的额外数据
        formData.append('userid', '2');
        formData.append('usercom', '1');
        // 新增：取出自定义元数据并添加到表单
        if (fileItem.customAdditionalMeta) {
          formData.append('additional', fileItem.customAdditionalMeta);
        }
        return formData;
      }
    }
  },
});

完整修改后的代码 #

<input type="file" id="img" name="img" data-file-metadata-additional="1">
<script>
const pond = FilePond.create(document.querySelector('#img'),{
  server: {
    process: {
      url: 'opbouw/model/post/addimg.php',
      ondata: (formData, fileItem) => {
        formData.append('userid', '2');
        formData.append('usercom', '1');
        // 新增：添加自定义元数据到表单
        if (fileItem.customAdditionalMeta) {
          formData.append('additional', fileItem.customAdditionalMeta);
        }
        return formData;
      }
    }
  },
});

pond.onaddfile = (err, item) => {
  console.log(item);
  const metadata = item.getMetadata();
  console.log(metadata);
  // 新增：保存元数据到文件项
  item.customAdditionalMeta = metadata.additional;
}
</script>

关键细节说明 #

• item.getMetadata()会返回一个对象，里面包含所有以data-file-metadata-开头的属性，比如你设置的data-file-metadata-additional="1"，对应到metadata.additional的值就是"1"。
• ondata的第二个参数fileItem是当前提交的文件实例，我们把元数据存在它的自定义属性上，就能在提交时精准关联到对应文件。
• 你可以根据后端需求修改字段名，比如把additional改成接口需要的参数标识。

这样修改后，提交的FormData里就会包含你设置的自定义元数据了，后端用$_POST['additional']（PHP场景）就能拿到这个值啦。

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