laravel 8 - 裁剪图像并上传

Question

我正在使用 Laravel 8，我是初学者。我想裁剪图像并上传，但是当我选择图像时，图像的名称出现在屏幕上，但是当我裁剪并提交时，我看不到图像的名称（我不知道可能没有上传）。如何上传图片？或者我该如何解决？顺便说一句，我正在使用“ijaboCropTool”。

我的控制器是：

public function contentPost(request $request){

        $request->validate([
            
            'title' => ['string', 'max:128'],
            'short_content' => ['string', 'max:256'],
            'content' => ['string'],
            'first_photo' => 'required|image|mimes:jpeg,png,jpg,svg|max:2048',
            
            
        ]);


        $dest = 'images/test_post/';
        $file = $request->file('first_photo');
        $new_image_name = 'UIMG'.date('YmdHis').uniqid().'.jpg';

        $move = $file->move(public_path($dest),$new_image_name);

        if(!$move){
            return response()->json(['status'=>0,'msg'=>'falseee']);
        }else{
            return response()->json(['status'=>1,'msg'=>'trueee','name'=>$new_image_name]);
        }
        

    
        $title = $request->title;
        $short = $request->short_content;
        $content = $request->content;



        $save = Post::create([
            'title' => $title,
            'short_content' => $short,
            'content' => Purifier::clean($content),
            'user_id' => Auth::user()->id,
            'first_photo' => $filename,

            
        ]);

     

        if($save){
            return back()->with('success','successs');
        }else{
            return back()->with('error','errorr');
        }


    }

我的blade.php是：

<form class="form-horizontal" method="POST" action="{{route('contentPost')}}" enctype="multipart/form-data" id="upload_image_form" >

                @csrf

                <div class="form-group p-3">
                  <label for="">Change picture</label>
                  <input type="file" name="first_photo" id="first_photo">
                </div>

                <div class="form-group">
                  <div class="col-lg-12">
                    <input class="form-control" maxlength="128" name='title'  required="" autofocus="">
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-lg-12">
                      <textarea class="form-control" maxlength="256"  rows="2" name="short_content"></textarea>
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-lg-12">
                      <!-- <textarea class="form-control" rows="16" name="content" ></textarea> -->
                      <input id="content" type="hidden" name="content">
                      <trix-editor  input="content"></trix-editor>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-md-3 control-label"></label>
                  <div class="col-md-12">
                    <input type="submit" class="site-btn" value="save">
                    <span></span>
                  </div>
                </div>
              </form>

我的 ajax 是：

$('#first_photo').ijaboCropTool({
        processUrl: '{{route("contentPost")}}',
        allowedExtensions: ['jpg', 'jpeg','png'],
        withCSRF:['_token','{{ csrf_token() }}'],
        setRatio:1,
        onSuccess:function(message, element, status){
          alert(message);
          },
        onError:function(message, element, status){
          alert(message);
        }
    });

Answer 1

我认为您的问题出在您的控制器上。 如果我没记错的话，您并没有保存裁剪后的图像。

这是我的控制器。请注意，我首先选择用户更新数据库中的图片，然后保存图片。

function crop(Request $request){

        $user = User::where('id', auth()->user()->id)
            ->first();
            
        $path = '/storage/user/picture';
        $picture = $request->file('picture');
        $new_image_name = 'UIMG'.date('Ymd').uniqid().'.jpg';
        $upload = $picture->move(public_path($path), $new_image_name);
        if($upload){
            $user->update(['picture' => $new_image_name]);
            return response()->json(['status'=>1, 'msg'=>'Message for success', 'name'=>$new_image_name]);
        }else{
              return response()->json(['status'=>0, 'msg'=>'Message for error']);
        }
      }