服务器端无法捕获附加的表单数据文件

Question

我有一个模块，用户可以在其中拍摄图片（将转换为 a base64 string，然后转换为 a file），我需要将文件上传到我们的服务器，但在转换base64为file object并将其附加到formData并提交表单之后。我发现在我的后端，它无法读取$_FILES属性（参考最后一张图片），数组是空的，但假设我的文件在那里。并检查我的formData变量，将数据附加到其中。html<form id="form" method="POST" action="smth.php" enctype="multipart/form-data">  ...  <!-- some other input information --></form>js$('#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);  ...});smth.php<?php ... var_dump($_POST); var_dump($_FILES); exit(); ... ?>结果

Answer 1

您将无法将您的FormData实例附加到现有实例以<form>进行正常提交（我认为）。

如果你想搞乱正常的提交，你需要在<form>like中添加 HTML 元素<input type="file">。

否则，通过 AJAX 提交数据

document.getElementById('form').addEventListener('submit', async function(e) {

  e.preventDefault()

  const formData = new FormData(this)

  // do stuff to formData

  const res = await fetch(this.action, {

    method: this.method,

    body: formData // automatically sets Content-type: multipart/form-data

  })

  if (res.ok) {

    // handle response

  }

})