laravel5.8 上传头像前的图片预览

Question

I have profile image upload section. I want to preview an image before uploading. But I got an error saying

Too few arguments to function

I have already executed php artisan storage:link but I can not store my image in uploads/profile/ folder. So I cannot insert image data in mysql server.

I want to preview an image before uploading, and submit all the data by the other submit button.

Here is what I tried.

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();
    }

web.php

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

}); create.blade.php

<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

const inpFile = document.getElementById("inpFile");
const previewContainer = document.getElementById("imagePreview");
const previewImage = previewContainer.querySelector(".image-preview__image");

inpFile.addEventListener("change", function() {
    const file = this.files[0];
    if(file) {
        const reader = new FileReader();

        reader.addEventListener("load", function(){
            previewImage.setAttribute("src", this.result);
        });

        inpFile.style.display = "none";
        previewImage.style.display = "block";

        reader.readAsDataURL(file);
    } else {
        inpFile.style.display = null;
        previewImage.style.display = null;
        previewImage.setAttribute("src", "");
    }

});

const realFileBtn = document.getElementById("inpFile");
const customBtn = document.getElementById("custom-button");

    customBtn.addEventListener("click", function(){
        realFileBtn.click()
    });

When I don't use form method, JavaScript is working good.

Answer 1

You don't need that much script to display an image after selecting. There is a simple way out. Here is an example:

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