在 Laravel 和 vue js 中上传多个图像答案

【问题标题】：Uploading Multiple Image in Laravel and vue js在 Laravel 和 vue js 中上传多个图像
【发布时间】：2022-10-07 03:59:18
【问题描述】：

我正在开发一个应用程序，该应用程序应该使用 laravel 和 vue js 在数据库中上传多个图像。

现在由于某种原因，它不断在后端返回空值。希望有人能指出这段代码中的问题。

这是我的前端代码 vue js

<template>
    <div>
        <div>
            <form @submit.prevent=\"submit\">
                <input type=\"file\" @change=\"onChange\" multiple/>
                <input type=\"submit\" value=\"Upload\">
            </form>
        </div>
    </div> 
</template>
<script>
export default {
  data: ()=>({
      image:[],
  }),
  methods:{
      onChange(e){
        
          this.image = e.target.files[0];
      },
      submit(){
          let payload = new FormData();
          
            for(let i=0; i<this.image.length; i++){
                payload.append(\'image[]\', this.image[i])
                }

                axios.post(\'/api/formsubmit\',payload).then(res=>{
                    console.log(\"Response\", res.data)
                }).catch(err=>console.log(err))


      }
  },
}
</script>

这可能是 Laravel 7 的后端代码

public function multipleupload(Request $request)
    {
       try{
           if($request->hasFile(\'image\')){
                $upload = $request->file(\'image\');
                $file_name = time().\'.\'.$upload->getClientOriginalName();
                $upload->move(public_path(\'image\'), $file_name);
           
               return response()->json([
                   \'message\'=>\'File upload successfully!\'
               ], 200);
           }else {
               return \'no data\';
           }
       }catch(\\Exception $e){
           return response()->json([
               \'message\'=>$e->getMessage()
           ]);
       }
    }

此代码将始终返回“无数据”。一直在努力解决，但没有任何进展，希望有人能提供帮助。

谢谢，

标签： laravel vue.js vuejs2 vuejs3

【解决方案1】：

如果你想上传多张图片，你必须循环，你可以试试这个：

    public function multipleupload(Request $request)
    {
        $input = $request->all();

        request()->validate([

            'image' => 'required',

        ]); 

         if($request->hasfile('image'))
         {
            foreach($request->file('image') as $image)

            {
                $imageName=file_name =$image->getClientOriginalName();
                $image->move(public_path().'/images/', $imageName);  
                $insert['image'] = "$imageName";

            }
         }       

        Image::create($insert);

        return back()

                ->with('success','Multiple Image Upload Successfully');
    }

【讨论】：

【解决方案2】：

我希望这可以帮助你很多。

访问https://github.com/Zakerxa/Vue-Multi-Image-Upload

【讨论】：