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

g6ll5ycj 于 2023-06-06 发布在 Vue.js

关注(0)|答案(2)|浏览(326)

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

vue.js

来源：https://stackoverflow.com/questions/69110523/how-to-send-an-array-of-files-using-formdata

2条答案

按热度按时间

3b6akqbq1#

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

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

赞(0）回复(0）举报 2023-06-06

fivyi3re2#

不像问题中那样将文件追加到另一个数组中，而是直接追加，但要添加方括号。
而不是使用这个：

this.filelist.push(f)

只需将文件附加到表单数据对象，如下所示：

frmData.append('file_ticket[]', file);

在你的Laravel控制器中，只需要使用下面的代码来获取你的文件（我假设你正在使用POST，并且你正在将Request对象作为参数传递给你的控制器函数）

if ($request->hasFile('file_ticket')) {
   $file_tickets = $request->file('file_ticket');
   foreach ($file_tickets as $index => $file_ticket) {
      //The rest of your code goes here
   }
}

hasFile函数检查您的请求是否具有该文件票证，并使用$request->file获取文件数组。

赞(0）回复(0）举报 2023-06-06

我来回答

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

2条答案

相关问题

热门标签

最新问答