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

Posted

技术标签:

【中文标题】使用图像干预的多图像上传。我尝试上传多张图片但无法上传,因为我不知道如何,任何帮助将不胜感激【英文标题】: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="#"  />
            </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)" >
                            <!--  $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>

【问题讨论】:

【参考方案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

【讨论】:

以上是关于使用图像干预的多图像上传。我尝试上传多张图片但无法上传,因为我不知道如何,任何帮助将不胜感激的主要内容,如果未能解决你的问题,请参考以下文章

多图片上传

将多张图片上传到 iOS 中的 FTP 服务器

无法上传多个图像 django - ajax

Flutter 无法上传从 multi_image_picker 获取的多张图片

微信jssdk多图上传

Laravel 8,如何一次上传多张图片