通过 Fetch API 将复杂的表单数据发送到 PHP 端点 [重复]

Question

如何使用 Fetch API 将这样的表单发送到 laravel 端点：我遇到的问题是我无法同时获取具有数组名称“[]”的文件和输入。我尝试遍历表单的每个元素并创建一个 json 对象，但是当表单中有文件输入时，它会失败，因为您必须将数据以 application/json 格式发送，而您必须将其发送到 JSON.stringyfy(data)，这会导致文件输入消失。
我还尝试使用FormData()，它与文件和其他正常输入一起工作得很好，但是当涉及到数组名称name[] 或事件price[10] 或`price[1][] 的输入时，它不起作用。发送这种表格的最佳方法是什么？

<form action="/end-point">

    <input type="text" name="title" value="my article title">
    <textarea name="body" id="" cols="30" rows="10">THis is the body</textarea>
    
    <input type="checkbox" name="facilities[]" value="1">
    <input type="checkbox" name="facilities[]" value="2">
    
    <input type="radio" name="option[]" value="3">
    <input type="radio" name="option[]" value="4">
    
    <input type="text" name="name[]" value="test1">
    <input type="text" name="name[]" value="test2">

    <select name="service_id[]">
        <option value="1">Service1</option>
        <option value="2">Service2</option>
    </select>

    <select name="service_id[]">
        <option value="1">Service1</option>
        <option value="2">Service2</option>
    </select>

    <select name="service_id[]">
        <option value="1">Service1</option>
        <option value="2">Service2</option>
    </select>
    
    <input type="file" name="picture">
    
</form>

我在 laravel 端点中需要的格式

[
"title" => "my article title"
  "body" => "THis is the body"
  "facilities" => array:2 [▼
    0 => "1"
    1 => "2"
  ]
  "option" => array:1 [▼
    0 => "3"
  ]
  "name" => array:2 [▼
    0 => "test1"
    1 => "test2"
  ]
  "service_id" => array:3 [▼
    0 => "1"
    1 => "1"
    2 => "1"
  ]
  "picture" => Illuminate\Http\UploadedFile {#244 ▼
    -test: false
    -originalName: "m16.jpg"
    -mimeType: "image/jpeg"
    -error: 0
    #hashName: null
    path: "C:\wamp64\tmp"
    filename: "php87C8.tmp"
    basename: "php87C8.tmp"
    pathname: "C:\wamp64\tmp\php87C8.tmp"
    extension: "tmp"
    realPath: "C:\wamp64\tmp\php87C8.tmp"
    aTime: 2020-07-02 04:41:33
    mTime: 2020-07-02 04:41:33
    cTime: 2020-07-02 04:41:33
    inode: 3096224744035967
    size: 25467
    perms: 0100666
    owner: 0
    group: 0
    type: "file"
    writable: true
    readable: true
    executable: false
    file: true
    dir: false
    link: false
    linkTarget: "C:\wamp64\tmp\php87C8.tmp"
  }
]

Answer 1

我正在使用 Vue 来传递文件。

<input type="file" @change="onChange" class="mb-5">

在我的methods上

onChange(e) {
      this.form.image = e.target.files[0]
    }

这将返回图像名称

那么在我的 POST ajax 请求中就是这个方法

  let form = new FormData()

  form.append('image', this.form.image)
  form.append('name', this.form.name) // [edited]

  fetch([url], {
    method: 'POST',
    Accept: "application/json",
    body: json.stringify(form)
  })
  .then(response => response.json())
  .then(image => console.log(image))

如果这不起作用，请尝试更改 Accept Header。

编辑：

您还将在追加中传递name 或其他字段。

编辑 2

  let form = new FormData()[];

  foreach(form in forms) {
    form.append('image', this.form.image)
    form.append('name', this.form.name)
  }
  
  fetch([url], {
    method: 'POST',
    Accept: "application/json",
    body: json.stringify(form)
  })
  .then(response => response.json())
  .then(image => console.log(image))