如何使用FormData发送文件数组？Vue前端对接Laravel后端上传

问题根因 #

直接将File类型的数组整体append到FormData中时，浏览器会自动将数组转为[object File]字符串，不会序列化每个文件的二进制内容，因此后端无法接收到真实文件。

前端修改步骤 #

1. 循环遍历文件数组，单独将每个文件以file_ticket[]为键名append到FormData中，键名末尾的[]是后端识别为数组的必要标识
2. 为axios请求添加multipart/form-data请求头，确保后端正确解析文件流

修改后的完整前端代码 #

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)       
  // 替换原来的整行append，循环添加每个文件
  this.filelist.forEach(file => {
    frmData.append('file_ticket[]', file)
  })
  frmData.append('client_id', this.idUser) 

  const url = `ticket/new_ticket`

  axios.post(url, frmData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then((response) => {
    console.log(response)
  })
}

后端Laravel接收示例 #

你可以直接通过file方法获取文件数组，后续可自行处理存储逻辑：

// 控制器方法内
$validated = $request->validate([
    'file_ticket' => 'nullable|array',
    'file_ticket.*' => 'file|mimes:jpg,png,pdf|max:10240' // 根据业务调整文件格式、大小限制
]);

$files = $request->file('file_ticket');
if ($files) {
    foreach ($files as $file) {
        // 存储文件到storage/app/tickets目录，可自行调整存储磁盘、路径
        $savePath = $file->store('tickets');
        // 你的业务逻辑，比如将路径存入数据库
    }
}

内容的提问来源于stack exchange，提问作者Mark