Javascript 上传个人资料照片前的laravel5.8图像预览

我有个人资料图片上传部分。 我想在上传前预览图像。 但我有个错误说

参数太少，无法正常工作

我已经执行了php artisan storage:link，但我无法将我的图像存储在uploads/profile/folder中。所以我不能在mysql服务器中插入图像数据

我想在上传前预览一张图片，然后由另一个提交人提交所有数据 按钮

这是我试过的

UserController.php

public function store(Request $request) {
    $this->validate($request,[
        'image'=>'image|mimes:png, jpg, jpeg|max:20000',
        'name'=>'required',
        'gender'=>'required',
        'bod'=>'required|before:today'
    ]);
    $user_id = auth()->user()->id;
    Profile::updateOrCreate(
        ['user_id' => $user_id], // search requirements
        [   'image' => request('image'),
            'name' => request('name'),
            'gender' => request('gender'),
            'country' => request('country'),
            'bod' => request('bod'),
            'description' => request('description')
        ]
    );
    return redirect()->route('profile.index');
}

public function upload(Request $request) {

        $this->validate($request,[
                'image'=>'image|mimes:png, jpg, jpeg|max:20000'

        $user_id = auth()->user()->id;
        if($request->hasfile('image')){
            $file = $request->file('image');
            $ext = $file->getClientOriginalExtension();
            $filename = time().'.'.$ext;
            $file->move('uploads/profile/', $filename);
            Profile::where('user_id',$user_id)->update([
                'image'=>$filename
            ]);
        }
        return redirect()->back();
    }

Route::prefix('user')->group(function(){
Route::resource('profile', 'UserController');
Route::resource('profile', 'UserController@upload')->name('profile.upload');

<div class="image-preview" id="imagePreview">
         @if(empty(Auth::user()->profile->image))
              <img src="{{asset('image/image1.jpg')}}" class="image-preview__image">
          @else
       <img src="{{asset('uploads/profile')}}/{{Auth::user()->profile->image}}" class="image-preview__image">
                            @endif
                    </div>


      <form action="{{ route('profile.upload') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="btnUpload">
              <input type="file" name="image" id="inpFile"hidden="hidden">
     </div>

      <div class="edit-image">
           <button type="submit" class="editBtn" id="custom-button">Change Image</button>
       </div>
   </form>


<form action="{{ route('profile.store') }}" method="POST" >
  @csrf
//other profile info
 <button type="submit" class="saveBtn">Save</button>
                </div>
            </form>

web.php

public function store(Request $request) {
    $this->validate($request,[
        'image'=>'image|mimes:png, jpg, jpeg|max:20000',
        'name'=>'required',
        'gender'=>'required',
        'bod'=>'required|before:today'
    ]);
    $user_id = auth()->user()->id;
    Profile::updateOrCreate(
        ['user_id' => $user_id], // search requirements
        [   'image' => request('image'),
            'name' => request('name'),
            'gender' => request('gender'),
            'country' => request('country'),
            'bod' => request('bod'),
            'description' => request('description')
        ]
    );
    return redirect()->route('profile.index');
}

public function upload(Request $request) {

        $this->validate($request,[
                'image'=>'image|mimes:png, jpg, jpeg|max:20000'

        $user_id = auth()->user()->id;
        if($request->hasfile('image')){
            $file = $request->file('image');
            $ext = $file->getClientOriginalExtension();
            $filename = time().'.'.$ext;
            $file->move('uploads/profile/', $filename);
            Profile::where('user_id',$user_id)->update([
                'image'=>$filename
            ]);
        }
        return redirect()->back();
    }

Route::prefix('user')->group(function(){
Route::resource('profile', 'UserController');
Route::resource('profile', 'UserController@upload')->name('profile.upload');

<div class="image-preview" id="imagePreview">
         @if(empty(Auth::user()->profile->image))
              <img src="{{asset('image/image1.jpg')}}" class="image-preview__image">
          @else
       <img src="{{asset('uploads/profile')}}/{{Auth::user()->profile->image}}" class="image-preview__image">
                            @endif
                    </div>


      <form action="{{ route('profile.upload') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="btnUpload">
              <input type="file" name="image" id="inpFile"hidden="hidden">
     </div>

      <div class="edit-image">
           <button type="submit" class="editBtn" id="custom-button">Change Image</button>
       </div>
   </form>


<form action="{{ route('profile.store') }}" method="POST" >
  @csrf
//other profile info
 <button type="submit" class="saveBtn">Save</button>
                </div>
            </form>

}))； create.blade.php

public function store(Request $request) {
    $this->validate($request,[
        'image'=>'image|mimes:png, jpg, jpeg|max:20000',
        'name'=>'required',
        'gender'=>'required',
        'bod'=>'required|before:today'
    ]);
    $user_id = auth()->user()->id;
    Profile::updateOrCreate(
        ['user_id' => $user_id], // search requirements
        [   'image' => request('image'),
            'name' => request('name'),
            'gender' => request('gender'),
            'country' => request('country'),
            'bod' => request('bod'),
            'description' => request('description')
        ]
    );
    return redirect()->route('profile.index');
}

public function upload(Request $request) {

        $this->validate($request,[
                'image'=>'image|mimes:png, jpg, jpeg|max:20000'

        $user_id = auth()->user()->id;
        if($request->hasfile('image')){
            $file = $request->file('image');
            $ext = $file->getClientOriginalExtension();
            $filename = time().'.'.$ext;
            $file->move('uploads/profile/', $filename);
            Profile::where('user_id',$user_id)->update([
                'image'=>$filename
            ]);
        }
        return redirect()->back();
    }

Route::prefix('user')->group(function(){
Route::resource('profile', 'UserController');
Route::resource('profile', 'UserController@upload')->name('profile.upload');

<div class="image-preview" id="imagePreview">
         @if(empty(Auth::user()->profile->image))
              <img src="{{asset('image/image1.jpg')}}" class="image-preview__image">
          @else
       <img src="{{asset('uploads/profile')}}/{{Auth::user()->profile->image}}" class="image-preview__image">
                            @endif
                    </div>


      <form action="{{ route('profile.upload') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="btnUpload">
              <input type="file" name="image" id="inpFile"hidden="hidden">
     </div>

      <div class="edit-image">
           <button type="submit" class="editBtn" id="custom-button">Change Image</button>
       </div>
   </form>


<form action="{{ route('profile.store') }}" method="POST" >
  @csrf
//other profile info
 <button type="submit" class="saveBtn">Save</button>
                </div>
            </form>

---

当我不使用表单方法时，JavaScript工作得很好。

在选择后，您不需要太多的脚本来显示图像。有一个简单的出路。 以下是一个例子：

 <input type="file" name="exmaple" id="inpFile" onchange="$('.image-preview__image')[0].src = window.URL.createObjectURL(this.files[0])"  required>

---

选择后，显示图像不需要太多脚本。有一个简单的出路。 以下是一个例子：

 <input type="file" name="exmaple" id="inpFile" onchange="$('.image-preview__image')[0].src = window.URL.createObjectURL(this.files[0])"  required>

为什么函数的参数太少？您想问什么？当我有Route:：resource（'profile'，'UserController@upload'）->name（'profile.upload'）；在web.php中，我遇到一个错误，说“参数太少，无法运行”。这是您的php错误。我只使用jquery

onchange

函数来设置图像预览的解决方案。这个解决方案与您的PHP代码错误无关。为什么函数的参数太少？您想问什么？当我有Route:：resource（'profile'，'UserController@upload'）->name（'profile.upload'）；在web.php中，我遇到一个错误，说“参数太少，无法运行”。这是您的php错误。我只使用jquery

onchange

函数来设置图像预览的解决方案。此解决方案与PHP代码错误无关