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

【问题标题】：How to send an array of files using FormData?如何使用 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()，发送一个包含空对象的数组

标签： javascript php laravel vue.js axios

【解决方案1】：

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

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

【讨论】：