如何使用 FormData 发送文件数组？

Posted 2023-03-14

【中文标题】如何使用 FormData 发送文件数组？

【英文标题】：How to send an array of files using FormData?

【发布时间】：2021-11-05 16:01:15

【问题描述】：

在 laravel 的后端，我有一个名为“file_ticket”的字段，我需要发送一个包含通过输入文件发送的文件的数组，我在前端使用 vue js。 如何将此数组发送到我的后端？当我尝试仅发送数组时，请求会返回类似“目标文件”的内容

result image

onChange(e) 
  let getFiles = [...this.$refs.file.files]
  
  if(!getFiles) return
  ([...getFiles]).forEach(f => 
    this.filelist.push(f)
  )      
,


saveTicket(event)
  event.preventDefault()      
               
  let frmData =  new FormData()
  frmData.append('subject', this.newTicket.subject) 
  frmData.append('service', this.newTicket.service) 
  frmData.append('description', this.newTicket.description)       
  frmData.append('file_ticket', this.filelist)       
  frmData.append('client_id', this.idUser) 


  const url = `ticket/new_ticket`

  axios.post(url, frmData).then((response) => 
    console.log(response)
  )

【问题讨论】：

使用 JSON。在服务器端使用json_decode。在客户端使用 JSON.stringify([1, 2, 3]);，其中 [1, 2, 3] 是您的数组。

@Someone_who_likes_SE 我认为你做不到。我很确定你必须使用FormData()

我是说，以表单数据的形式发送字符串化的 JSON

如果我使用 JSON.stringy()，发送一个包含空对象的数组

【参考方案1】：

只需使用相同的键将filelist 中的所有文件附加到formdata，它就会发送一个文件数组。

this.filelist.forEach((file) => 
    frmData.append('file_ticket', file);
);