Javascript 服务器端无法捕获append formdata文件

我有一个模块，用户可以在其中抓拍一张图片（它将转换为

base64字符串

，然后转换为

文件

），我需要将该文件上传到我们的服务器，但在将

base64

转换为

文件对象

并将其附加到

formData

并提交表单之后。我发现在我的后端，它无法读取

$\u FILES

属性（请参阅最后一张图片），数组是空的，但其中应该有我的文件

并检查my

formData

变量，将数据追加到其中

html

控制台

smth.php

<?php ... var_dump($_POST); var_dump($_FILES); exit(); ... ?>

结果

---

您将无法将您的

FormData

实例附加到现有的

以进行正常提交（我认为）

如果你想搞乱正常的提交，你需要在

中添加HTML元素，比如

否则，通过AJAX提交数据

document.getElementById（'form'）.addEventListener（'submit'，异步函数（e）{
e、 预防默认值（）
const formData=new formData（此）
//做一些事情来形成数据
const res=等待获取（this.action{
方法：这个方法，
body:formData//自动设置内容类型：多部分/表单数据
})
如果（res.ok）{
//处理响应
}
})

您似乎缺少阻止表单正常提交的部分。尝试将

returnfalse

添加到

submit

事件处理程序中。然后，您需要以编程方式提交表单数据。此外，

$（this）[0]）

更为简洁，因为只需

this

@Phil我尝试将我的

$（'#form'）

js代码移动到按钮中，然后

$（'#form'）。触发器（'submit'）

，仍然得到相同的结果，在PhP中，我的

$\u文件在哪里保持为空。@Phil你能给出你的ajax建议作为答案吗？所以我可以把它标记为答案。谢谢你的快速回复。
$('#form').on('submit', function(){
  ...
  var formData = new FormData($(this)[0]);
  var base64 = $('#photo').attr('src');

  console.log(...formData);
  console.log('before checking');

  if(base64 != 'default.png'){
    var file = dataUrltoFile(base64, 'photo.png'); //external function to convert base64 into file object
    formData.append('photo', file);
  }

  console.log('after checking');
  console.log(...formData);
  ...
});

<?php ... var_dump($_POST); var_dump($_FILES); exit(); ... ?>