Laravel API 从 vue js 发送文件数组

Question

您好，我在将 img 文件发送到 API

时遇到问题

e.target.files.forEach(file => {
     this.images[id]= file;
});

async handleFormSubmit(){
    let data = new FormData();
    data.append('images[]',this.images);
    await this.setCreatePost(data)
}

当我 console.log 文件时，我得到：

lastModified: 1637855593567
lastModifiedDate: Thu Nov 25 2021 16:53:13 GMT+0100 (Central European Standard Time) {}
name: "elena-putina-WuSzNJpys_4-unsplash.jpg"
size: 1027854
type: "image/jpeg"
webkitRelativePath: ""

当我 console.log formData 我得到：

data: Array(1)
0: "[object File]"
length: 1

当我尝试对文件进行字符串化时，我得到：

data: ['[{}]']

当我在 API 解码它时，我得到空对象。

谢谢。

Answer 1

在 handleSubmitForm() 我是这样追加的：data.append('images[]',this.images);

并且需要像这样附加：

this.images.forEach((image) => {
            data.append('images[]', image);
        });

在 Laravel 我可以像这样对每个循环做：（在它不起作用之前）

foreach ($request->file('images') as $image) {
   $image_name = $image->getClientOriginalName();
   $image_name = time().'_'.$image_name;
   $image->move(storage_path('images'), $image_name);
}

Laravel API 从 vue js 发送文件数组

Laravel API send array of files from vue js

file-upload

vuejs2

laravel-8