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

Posted 2023-02-27

【中文标题】通过 Fetch API 将复杂的表单数据发送到 PHP 端点 [重复]

【英文标题】：Sending complex form data via Fetch API to PHP endpoint [duplicate]

【发布时间】：2020-10-11 22:44:44

【问题描述】：

如何使用 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"
  
]

【问题讨论】：

要上传文件，您应该发送multipart/form-data 请求负载。

在不知道确切你的 Laravel 后端期望什么格式的情况下，这很难回答。有关上传文件和数据的一般信息，请参阅链接副本

@Phil 文件不是问题，我可以使用 new FormData() 形成所有数据和文件，但是当输入的数组名称像

@Phil 你不应该关闭我的问题，在我的场景中没有解决方案。我一直在研究和开发开发人员提供但不起作用的所有可能方式。

简单地说，你不能在 JSON 中嵌入这样的文件上传。副本中的答案应该已经解释了

【参考方案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))

【讨论】：

您只发送一个文件，当我们将一些带有数组名称的输入添加到

之类的表单中时，这是一个问题

@VeRJiL 您现在可以检查代码。我编辑了它

谢谢，但这并不适用，因为我试图将所有输入作为数组而不是信号输入

我尝试再次编辑我的答案，但我认为它不会起作用，如果它不起作用，请尝试另一种解决方法。