Upload multiple images in Vue.js and Laravel

Question

I'm trying to upload multiple files at once in vue.js and laravel, Code that i'm using is :

Vue.js code:

 <input type="file" v-validate="'required'" multiple @change="uploadDegree" name="uploadDegree" placeholder="Upload Degree"/>

  uploadDegree(e)
            {
                for (let file of e.target.files) {
                    try {
                        let reader = new FileReader();
                         reader.onloadend = file => {
                         this.user.degree_attachment= reader.result;
                        };
                        reader.readAsDataURL(file);                      
                    } catch {}
                }
              }

Laravel Code:

 $files = $request->input('degree_attachment');
           foreach($files as $file) {
               $degreename = time() . '.' . explode('/', explode(':', substr($file, 0, strpos($file, ';')))[1])[1];
                $pathDegreeExist = public_path("img/degree_img/"); 
                if(!File::exists($pathDegreeExist)) File::makeDirectory($pathDegreeExist, 777);
                $img = \Image::make($file);
                $img->save(public_path('img/degree_img/').$degreename); 
                $newUser->degree_attachment = $degreename;
            }

I'm getting this error :

Invalid argument supplied for foreach()

where i'm trying to get image,

Answer 1

there are two problems , the one mentioned in the comment

and another i noticed in your vue code , you are overriding the variable this.user.degree_attachment with the file content each time , so first its not multiple uploads second its type wont be an array so laravel controller wont know how to deal with hence the Invalid argument supplied for foreach() simply because its not iterative object type .

well i didnt try it on the laravel part , i tested the vue in this sandbox and console logged the array with the content of each file as an array item , but this normally is triggered by your laravel validation .

   uploadDegree(e) {
      let a = [];
      for (let file of e.target.files) {
        try {
          let reader = new FileReader();
          reader.onloadend = (file) => {
            a.push(reader.result);
          };
          reader.readAsDataURL(file);
          this.degree_attachment = a;
        } catch {}
      }
      console.log(this.degree_attachment);
    },