Javascript 通过Fetch API向PHP端点发送复杂表单数据

如何使用Fetch API将这样的表单发送到laravel端点：我遇到的问题是无法同时获取具有数组名“[]”的文件和输入。我尝试循环遍历表单的每个元素并创建一个json对象，但是当表单中有文件输入时，它会使它失败，因为您必须以

application/json

格式发送数据，而您必须

json.stringyfy（data）

，这会导致文件输入被取消。

[
"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"
  }
]

我还尝试过使用

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>

---

我正在使用Vue来传递文件

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

这将返回图像名称

那么在我的帖子中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标头

编辑：

您还将在append中传递

名称

或其他字段

编辑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))

---

您只发送了一个文件，当我们向@VeRJiL这样的表单中添加一些带有数组名的输入时，这就是问题所在。您现在可以检查代码了。我编辑了itthanks，但这不适用，因为我正在尝试将所有输入作为一个数组而不是单个输入。我尝试再次编辑我的答案，但我认为它不会起作用，如果它不起作用，请尝试其他解决方法。要上载文件，您应该发送一个

多部分/表单数据

请求负载。如果不确切知道您的Laravel后端需要什么格式，则很难回答此问题。请参阅链接副本，了解有关上载文件和文件的一般信息data@Phil该文件不是问题所在，我可以使用new FormData（）查看所有表单数据和该文件但是当有数组名为@Phil的输入时，问题就出现了。你不应该结束我的问题，因为在我的场景中，没有解决方案在起作用。我一直在研究和开发开发开发人员提供的所有可能的方法，但这些方法都不可行。简单地说，你不能在JSON中嵌入这样的文件上传。副本中的答案应该已经解释了这一点

  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))