使用Axios和Laravel上传图像时出现问题

Question

I'm trying to upload and save images with Axios and a Laravel API, but i'm getting a 422 error.

I've tested with Postman and i have the same result, i have a similar controller**(without the Foreach)** but to upload only one image at once and it works fine.

///Axios

    async submitFiles(){
       let fd = new FormData()
       for(var i = 0; i < this.files.length; i++){
         let file = this.files[i]
         fd.append('photo[' + i + ']', file)
       }
       try{
        await this.$axios.$post(`/albums/${this.$route.params.id}/photos`, fd, {headers:{'Content-Type': 'multipart/form-data'}})
        console.log(...fd)
        alert('uploaded')
        this.files = []
      }
      catch(err){
        console.log(err)
        alert(err)
      }

     }

//Laravel

class PhotosInAlbumController extends Controller
{
    public function store(PhotoInAlbumRequest $request, Album $album)
    {


        if($request->hasfile('photo')) 
        {

            $photo = new PhotoInAlbum();
            $photo->photo = $request->photo;
            $images[] = $request->file('photo');
            foreach ($images as $image) 
            {
                $filenameWithExt = $image->getClientOriginalName();
                $filename = pathInfo($filenameWithExt, PATHINFO_FILENAME);
                $extension = $image->getClientOriginalExtension();
                $filenameToStore = $filename.'_'.time().'.'.$extension;
                $path = $image->storeAs('photo/images', $filenameToStore,'public');
                $photo->photo = $path;
                $album->photos()->save($photo);

            }

        }

        return $photo;

    }
}

Hope someone can help me to figure out what's going on.

Thanks in advance (=

Answer 1

First, sorry I can't comment yet. But I see in this line: $images[] = $request->file('photo'); that a bi-dimensional array is built. I would try the assignment without the brackets: $images = $request->file('photo');