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