使用图像干预的多图像上传。我尝试上传多张图片但无法上传，因为我不知道如何，任何帮助将不胜感激答案

【问题标题】：Multiple Image Uploading using Image Intervention. I tried to upload multiple image but could not as i don't know how, any help would be appreciated使用图像干预的多图像上传。我尝试上传多张图片但无法上传，因为我不知道如何，任何帮助将不胜感激
【发布时间】：2021-06-16 01:04:36
【问题描述】：

这是我的控制器，谁能告诉我我必须添加更多内容，以便我可以将多个图像添加到我的数据库中我被指示使用循环，但我不完全知道在哪里使用，所以我添加了我的控制器允许我上传单个图像，但它没有用于上传多个图像。第二个代码是我的刀片文件，表示我创建表单的视图，我的图像的输入类型是“文件”，名称是“文件名”，并且我使用了 Laravel 的图像干预，因此将不胜感激。

public function upload(){
        $images = ImageModel::all();
        return view('uploadimage',compact('images'));
    }

    public function uploadImage(Request $req){
        $this->validate($req, [
                'filename' => 'required',
            'filename.*' => 'images|mimes:jpeg,png,jpg,gif,svg|max:2048'
            ]);
  
        $title = $req->title;
        $slug = Str::of($title)->slug('-');
        $alttext = $req->alttext;

        $originalImage= $req->file('filename');
        $thumbnailImage = Image::make($originalImage);

        $thumbnailPath = public_path().'/thumbnail/';
        $originalPath = public_path().'/images/';

        $temp = $originalImage->getClientOriginalName();
        $temp_ext = explode(".",$temp);
        $ext = end($temp_ext); 

        $filename = time().".".$ext;
        

        $thumbnailImage->save($originalPath.$filename);
        $thumbnailImage->resize(150,150);
        $thumbnailImage->save($thumbnailPath.$filename); 

        $imagemodel= new ImageModel();
        $imagemodel->title=$title;
        $imagemodel->slug=$slug;
        $imagemodel->alttext=$alttext;
        $imagemodel->filename=$filename;
        if($imagemodel->save()){
            return redirect()->back()->with('msg','Succesfully Uploaded'); 
        }
    }

我的blade.php文件也包括在内。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Image Upload</title>
    <style>
        img {
        border-radius: 2px;
        padding: 3px;
        width:200px; 
        height:100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Image Upload Using Intervention</h2>
        @if(Session::has('msg'))
            <div class="alert alert-success">
                {{ Session::get('msg')}}
            </div>
        @endif

        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
                </ul>
            </div>
        @endif
        
        <form action="{{URL::to('upload-image')}}" method="post" enctype="multipart/form-data">
        {{csrf_field() }}
            <div class="form-group">
                <label for="">Title</label>
                <input type="text" class="form-control" name="title" id=" ">
            </div>

            <div class="form-group">
                <label for="">Image</label>
                <input type="file" multiple class="form-control" name="filename" id="imgInp">
                <img width= " 200px"id="blah" src="#" alt="your image" />
            </div>

            <div class="form-group">
                <label for="alttext">AltText</label>
                <input type="text" class="form-control" name="alttext" id=" ">
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary">Upload</button>
            </div>
        </form>

        <hr>
        <div class="container">
            <div class="card">
                <div class="card-header">
                    <h2>Uploaded Images</h2>
                </div>

                <div class="card-body">
                    @if($images)
                        @foreach($images as $i)
                            <img src="{{ asset('images/'. $i->filename)}}" alt="">
                            <!-- {{ $i->filename}} -->
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>

        function readURL(input) {
            if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function(e) {
            $('#blah').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]); // convert to base64 string
            }
        }
        $("#imgInp").change(function() {
            readURL(this);
        });
    </script>
</body>
</html>

【问题讨论】：

标签： javascript php mysql laravel intervention

【解决方案1】：

这个没有使用jquery ajax

//controller
$files = $request->file('images'); //get all files

$images = [];
foreach($files as $file){
    $images[] = [ 'image_name' => $this->storeImage($file,'your_path') ];
}

/*storeImage function could be in same controller or a separate trait file, 
if you want to reuse image upload functionality in other controller(for image upload)*/

public function storeImage($file, $path) 
{
    $name = str_replace(" ", "_", $file->getClientOriginalName());
    $file->storeAs($path , $name);
    return $fileName;
}

ImageModel::insert($images); //save all record at once

//in html code change this line

<input type="file" multiple class="form-control" name="filename[]" id="imgInp">

为了更好的实践 laravel 有表单请求，一个包含验证逻辑的单独请求类。要创建一个，您可以使用以下 Artisan 命令：
php artisan make:request AnyNameRequest

【讨论】：