时间戳

首页 > 解决方案 > 在 Vue.js 和 Laravel 中上传多张图片

laravel - 在 Vue.js 和 Laravel 中上传多张图片

问题描述

我正在尝试在 vue.js 和 laravel 中一次上传多个文件，我使用的代码是：

Vue.js 代码：

 <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 代码：

 $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;
            }

我收到此错误：

Invalid argument supplied for foreach()

我试图在哪里获得图像，

标签： laravelvue.jslaravel-5

解决方案

有两个问题，评论中提到的一个

我在你的vue代码中注意到另一个，你this.user.degree_attachment每次都用文件内容覆盖变量，所以首先它不是多次上传，其次它的类型不会是一个数组，所以laravel控制器不会知道如何处理，因此Invalid argument supplied for foreach()仅仅是因为它不是迭代的对象类型。

好吧，我没有在 laravel 部分尝试过，我在这个沙箱中测试了 vue ，控制台将每个文件的内容记录为数组项，但这通常是由您的 laravel 验证触发的。

   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);
    },

推荐阅读