У меня есть раздел загрузки изображения профиля.Я хочу просмотреть изображение перед загрузкой.Но я получил сообщение об ошибке
Слишком мало аргументов для функции
Я уже выполнил хранилище php ремесленника: ссылка , но я не могу сохранить свойизображение в загрузках / профиль / папка.Поэтому я не могу вставить данные изображения на сервер 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 работает хорошо.