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

我有一个模块,用户可以在其中拍摄图片(将转换为 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);

  ...

});

http://img4.mukewang.com/6289eb8700018bd710370257.jpg

smth.php


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

结果

http://img2.mukewang.com/6289eb980001d4b412810134.jpg

胡子哥哥
浏览 112回答 1
1回答

慕丝7291255

您将无法将您的FormData实例附加到现有实例以<form>进行正常提交(我认为)。如果你想搞乱正常的提交,你需要在<form>like中添加 HTML 元素<input type="file">。否则,通过 AJAX 提交数据document.getElementById('form').addEventListener('submit', async function(e) {&nbsp; e.preventDefault()&nbsp; const formData = new FormData(this)&nbsp; // do stuff to formData&nbsp; const res = await fetch(this.action, {&nbsp; &nbsp; method: this.method,&nbsp; &nbsp; body: formData // automatically sets Content-type: multipart/form-data&nbsp; })&nbsp; if (res.ok) {&nbsp; &nbsp; // handle response&nbsp; }})
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript