Question

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

函数的参数太少

我已经执行了 php artisan storage：link ，但是我无法将图像存储在uploads / profile /文件夹中。因此我无法在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();
    }

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

当我不使用表单方法时，JavaScript运行良好。

Answer 1

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

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

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

1 个答案: