后端接口可以接收多个文件，多个文件使用相同的name接收

由于之前做过的基本是单文件上传，或者是多个不同类型的文件，那样会给文件设置不同的name，
但是想了一下原生的input就支持文件多选的，如果是用原生的表单提交的方式，那么在文件多选的时候肯定是用的相同name。
于是查了一下相关资料，原来 FormData 的 append() 方法不会覆盖的之前的数据，append() 会把新值添加到已有值集合的后面。
跟常规表单数据一样，你可以使用同一个名称添加多个值 。
但是也有一点点的区别，例如 (为了与 PHP 命名习惯一致在名称中添加了 [])：

  1. <input type="file" multiple onchange="changeFile(this)">
  3. <script>
  4.   function changeFile(e) {
  5.     let files = e.files;
  6.     let postData = new FormData();
  7.     for (let file of files) {
  8.       postData.append("files[]", file);
  9.     }
  10.     axios({
  11.       url: 'http://localhost/api/test.php',
  12.       method: 'post',
  13.       data: postData,
  14.     })
  15.   }
  16. </script>
  1. echo json_encode(array(
  2.     "code"  => 0,
  3.     "files" => $_FILES['files'],
  4.     "count" => count($_FILES['files']['name']),
  5. ));
  6. return;
  8. // 如果要处理文件，下面给出简单的示例代码，生产过程中要按实际需求添加类型验证、限制大小等操作
  9. $fileArray = $_FILES['files']; // 获取多个文件的信息，注意：这里的键名不包含[]
  10. $upload_dir = './upload/'; // 保存上传文件的目录
  11. foreach ($fileArray['error'] as $key => $error) {
  12.     if ($error == UPLOAD_ERR_OK) { // PHP常量UPLOAD_ERR_OK=0，表示上传没有出错
  13.         $temp_name = $fileArray['tmp_name'][$key];
  14.         $file_name = $fileArray['name'][$key];
  15.         move_uploaded_file($temp_name, $upload_dir . $file_name);
  16.         echo '文件 ' . $file_name . ' 上传成功!<br/>';
  17.     } else {
  18.         echo '文件 ' . $file_name . ' 上传失败!<br/>';
  19.     }
  20. }

测试截图
image.png

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/append
https://www.jb51.net/article/76913.htm