更新和上传图像Laravel 8

Question

所以，我试着创建一个更新配置文件和上传图像在同一时间，但我只能使它没有图像。我想让ajax可以更新而无需重新加载页面。所以我想，有人能给点提示吗，我不知道下一步该怎么做。谢谢。

Here My view:

@extends('layouts.main')
@section('container')
<div class="profil-kolom" >
@foreach ($users as $user) 
<div class="profil-img">
@if ($user->profile)
<img class="img-profilee" width="140px" src="{{ asset('storage/' . $user->profile) }}">
@else
<img class="img-profilee" type="file" width="140px" src="/img/default.png">
@endif
<div class="fileupload btn">
<span data-feather="camera" class="camera-profile"></span>
<span class="btn-text edit-profil">Update Photo</span>
<a class="dropdown-item upload" href=" " data-bs-toggle="modal" data-bs-target="#editmodal"></a>
</div>
</div>

<div class="profil-nama">
<p>{{ auth()->user()->name }}</p>
</div>
<div class="kelasss3 my-3">

<div class="my-clas1">
About
<div class="viewall"> 
</div>
<hr width="850px">
<div class="my-hashtags1">
Introduction
</div>
<div class="my-hashtags1">Add a short bio to tell people more about yourself.</div>
<a class="link-profile" href="">+ Add Bio</a>
<hr width="850px">
<div class="my-hashtags1">
Interesets
</div>
<div class="my-hashtags1">Only visible to you Recommendations are based on your interests</div>
<a class="link-profile" href="">+ Add Intersents</a>
<hr width="850px">
<div class="my-hashtags1">
Experience
</div>
<div class="my-hashtags1">Showcase your professional journey on with other people on Smart Examp.</div>
<a class="link-profile" href="">+ Add Experience</a>
<hr width="850px">
<div class="my-hashtags1">
Social Links
</div>
<div class="my-hashtags1"></div><br>
<hr width="850px">
<div class="my-hashtags1">
Schedule
</div>
<div class="my-hashtags1">This is where you enter your schedule to share with students</div>
<a class="link-profile" href="">+ Add Schedule</a>
<hr width="850px">
<div class="my-hashtags1">
Education
</div>
<div class="my-hashtags1">This is where you can enter information about your educational background</div>
<a class="link-profile" href="">+ Add Education</a>
<hr width="850px">
<div class="my-hashtags1">
Links
</div>
<a class="link-profile" href="">+ Add Links</a>
<div class="my-hashtags1"></div>
</div>

</div>
</div>
<div class="nav-position">
<ul class="nav flex-column">
<li class="nav-item nav-sidebar">
<a class="nav-link posts link-dark link-dark text-center text-decoration-none color-#333333 {{ ($title === "posts") ? 'active' : '' }}" aria-current="page" href="">
About
</a>
</li>
<li class="nav-item nav-sidebar">
<a class="nav-link posts link-dark link-dark text-center text-decoration-none color-#333333 {{ ($title === "posts") ? 'active' : '' }}" aria-current="page" href="">
Posts
</a>
</li>
<li class="nav-item nav-sidebar">
<a class="nav-link folder link-dark link-dark text-center text-decoration-none color-#333333 {{ ($title === "folder") ? 'active' : '' }}" aria-current="page" href="">
Resources
</a>
</li>
<li class="nav-item nav-sidebar">
<a class="nav-link member link-dark link-dark text-center text-decoration-none color-#333333 {{ ($title === "member") ? 'active' : '' }}" href="">
Connections
</a>
</li>
<li class="nav-item nav-sidebar">
<a class="nav-link member link-dark text-center link-dark text-decoration-none color-#333333 {{ ($title === "member") ? 'active' : '' }}" href="">
Communites
</a>
</li>
<li class="nav-item nav-sidebar">
<a class="nav-link member link-dark text-center link-dark text-decoration-none color-#333333 {{ ($title === "member") ? 'active' : '' }}" href="">
Progress
</a>
</li>
</ul>
</div>
<!-- Modal -->

<!-- Modal -->
<div class="modal fade" id="editmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-assign">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Upload Photo</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="{{ route('editprofile.update', $user->id) }}" method="POST" enctype="multipart/form-data">
@csrf
@method('put')
<div class="modal-body">
<div class="upload-photo"> 
<div class="card card-photo">
<img src="/img/default.png" class="card-img-top img-preview img-fluid" alt="...">
</div>
<div class="input-photo">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-up ikon-upload" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z"/>
</svg>
<span class="btn-text upload-photo1">Upload Photo</span>
<input class="file-photo" type="file" id="profile" name="profile" onchange="previewImage()">
</div>

<div class="card update-profile">
<div class="col-md-3 px-1">
<div class="form-group input-name">
<label>Username:</label>
<input type="text" class="form-control" name="name" id="name" value="{{ old('name', $user->name) }}" @error('name') is-invalid @enderror>
</div>
</div>
@error('name')
<div class="alert alert-danger">
{{ message }}
</div>
@enderror    

<div class="col-md-3 px-1">
<div class="form-group input-tgl">
<label>Tanggal Lahir:</label>
<input type="date" class="form-control" name="tanggal_lahir" id="tanggal_lahir" value="{{ auth()->user()->tanggal_lahir }}" @error('tanggal_lahir') is-invalid @enderror>
</div>
</div>
@error('tanggal_lahir')
<div class="alert alert-danger">
{{ message }}
</div>
@enderror  
<div class="col-md-3 px-1">
<div class="form-group input-tempat-lhr">
<label>Tempat Lahir:</label>
<input type="text" class="form-control" name="tempat_lahir" id="tempat_lahir" value="{{ old('tempat_lahir', $user->tempat_lahir) }}" @error('tempat_lahir') is-invalid @enderror>
</div>
</div>
@error('tempat_lahir')
<div class="alert alert-danger">
{{ message }}
</div>
@enderror
<div class="col-md-3 px-1">
<div class="form-check form-group input-jk">
<label>Jenis Kelamin:</label><br>
<div class="form-check" @error('jenis-kelamin') is-invalid @enderror>
<input class="form-check-input" type="radio" name="jenis_kelamin" id="jenis_kelamin" value="pria">
<label class="form-check-label" for="flexRadioDefault1">
Pria
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_kelamin" id="jenis_kelamin" value="wanita" checked>
<label class="form-check-label" for="flexRadioDefault2">
Wanita
</label>
</div>
</div>
</div>
@error('jenis_kelamin')
<div class="alert alert-danger">
{{ message }}
</div>
@enderror
<div class="col-md-3 px-1">
<div class="form-group input-agama">
<label>Agama:</label>
<select name="agama" id="agama" class="form-select" aria-label="Default select example" @error('agama') is-invalid @enderror required>
<option value="" hidden="">Pilih Agama</option>
<option value="Islam">Islam</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
<option value="Kristen">Kristen</option>
<option value="Khatolik">Khatolik</option>
<option value="Konghucu">Khonghucu</option>
</select>
</div>
</div>
</div>
</div>
@error('agama')
<div class="alert alert-danger">
{{ message }}
</div>
@enderror
<div class="modal-footer">
<button type="submit" class="btn btn-secondary" data-bs-dismiss="modal" value="{{ $user->id }}">Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
@endforeach

还有脚本

<script>
function previewImage() {
const profile = document.querySelector('#profile');
const imgPreview = document.querySelector('.img-preview');
imgPreview.style.display = 'block';
const oFReader = new FileReader();
oFReader.readAsDataURL(profile.files[0]);
oFReader.onload = function(oFREvent) {
imgPreview.src = oFREvent.target.result;
}
}
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(document).on("click", "#submit", function(){
var url = "{{ URL('editprofile/'.$user->id) }}";
var id = 
$.ajax({
url: url,
type:"PATCH",
cache:false,
data:{
_token:'{{ csrf_token() }}',
type: 3,
name: $('name').val(),
tanggal_lahir: $('tanggal_lahir').val(),
tempat_lahir: $('tempat_lahir').val(),
jenis_kelamin: $('jenis_kelamin').val(),
agama: $('agama').val()
},
success: function(dataResault){
dataResault = JSON.parse(dataResault);
if(dataResault.statusCode)
{
window.location = "/editprofile";
}else {
alert("Internal Server Error")
}
} 
});
});
</script>

控制器:

<?php
namespace AppHttpControllers;
use AppModelsKelas;
use AppModelsUser;
use FakerProviderImage;
use IlluminateHttpRequest;
use SymfonyComponentHttpKernelExceptionMethodNotAllowedHttpException;
use IlluminateSupportFacadesStorage;
use IlluminateSupportFacadesDB;

class ProfileController extends Controller
{
/**
* Display a listing of the resource.
*
* @return IlluminateHttpResponse
*/
public function index()
{
return view('profile.index', [
'title' => 'Profile',
'users' => User::where('id', auth()->user()->id)->get()
]);
}
/**
* Show the form for creating a new resource.
*
* @return IlluminateHttpResponse
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param  IlluminateHttpRequest  $request
* @return IlluminateHttpResponse
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*
* @param  AppModelsUser  $user
* @return IlluminateHttpResponse
*/
public function show(User $user)
{
return view('profile.index', [
'title' => 'profile',
'user' => $user
]);
// $user = User::all();
// return view('profile.index', compact('user'));
// return view('profile.index', [
//     'title' => 'profile',
//     'user' => $user
// ]);
}
/**
* Show the form for editing the specified resource.
*
* @param  AppModelsUser  $user
* @return IlluminateHttpResponse
*/
public function edit(User $user, Request $request, $id)
{
// return view('profile.index', [
//     'user' => $user
// ]);
$User = User::find($id);
// echo json_encode($profile);
return view('profile.index', compact('user', 'id'));
}
/**
* Update the specified resource in storage.
*
* @param  IlluminateHttpRequest  $request
* @param  AppModelsUser  $user
* @return IlluminateHttpResponse
*/
public function update(Request $request, User $user, $id)
{

$User = User::find($id);
$User->name = request('name');
$User->tanggal_lahir = request('tanggal_lahir');
$User->tempat_lahir = request('tempat_lahir');
$User->jenis_kelamin = request('jenis_kelamin');
$user->agama = request('agama');
$user->profile = request('profile');
$User->save();
return json_encode(array('statusCode' => 200));

}

/**
* Remove the specified resource from storage.
*
* @param  AppModelsUser  $user
* @return IlluminateHttpResponse
*/
public function destroy(User $user)
{
//
}
public function upload(Request $request)
{
$request->validate([
'file' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$profile = new profile;
if ($request->file('file')) {
$profilePath = $request->file('file');
$profileName = $profilePath->getClientOriginalName();
$path = $request->file('file')->storeAs('uploads', $profileName, 'public');
}
$profile->name = $profileName;
$profile->path = '/storage/' . $path;
$profile->save();
return response()->json('profile uploaded successfully');
}
}

路线

<?php
use AppHttpControllersClassesController;
use AppHttpControllersQuestionsController;
use AppHttpControllersPostsController;
use AppHttpControllersMemberController;
use AppHttpControllersPasswordController;
use AppHttpControllersEmailController;
use AppHttpControllersTimeController;
use AppModelsKelas;
use IlluminateSupportFacadesRoute;
use AppHttpControllersLoginController;
use AppHttpControllersProfileController;
use AppHttpControllersDiscoverController;
use AppHttpControllersMessagesController;
use AppHttpControllersFolderController;
use AppHttpControllersHomeController;
use SebastianBergmannCodeCoverageReportHtmlDashboard;
use SymfonyComponentHttpKernelProfilerProfile;
use AppHttpControllersFullCalenderController;
use AppHttpControllersPreviewController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('home', ['title' => 'Login']);
});
Route::get('/login', [LoginController::class, 'index'])->name('login')->middleware('guest');
Route::post('/login', [LoginController::class, 'authenticate']);
Route::post('/logout', [LoginController::class, 'logout']);
Route::get('/setup-password/{token}', [PasswordController::class, 'edit'])->name('setup-password-get');
Route::post('/setup-password', [PasswordController::class, 'update'])->name('setup-password');
Route::group(['middleware' => ['auth', 'ceklevel:admin']], function () {
Route::get('/groups/members/{kelas:slug}/addmember', [EmailController::class, 'show']);
// Route::get('/groups/quiz/index', [TimeController::class, 'index']);
Route::get('/groups/quiz/index', [TimeController::class, 'create']);
Route::get('/groups/quiz/question', [QuestionsController::class, 'create']);
Route::get('/email', [EmailController::class, 'kirim']);
});
Route::group(['middleware' => ['auth', 'ceklevel:admin,user']], function () {
Route::get('/home', function () {
return view(('home.index'), ['title' => 'home']);
});
Route::get('/edit', [ProfileController::class, 'edit'])->name('edit');
Route::get('/home', [HomeController::class, 'index']);
Route::get('/classes', [ClassesController::class, 'index']);
Route::get('/classes/index/checkSlug', [ClassesController::class, 'checkSlug']);
Route::get('/groups/{kelas:slug}/posts', [PostsController::class, 'show']);
Route::get('/groups/{kelas:slug}/folder', [FolderController::class, 'show']);
Route::get('/groups/members/{kelas:slug}/member', [MemberController::class, 'show']);
Route::get('/profile', [ProfileController::class, 'index'])->name('profile');
Route::get('/discover', [DiscoverController::class, 'index']);
Route::get('/messages', [MessagesController::class, 'index']);
Route::get('fullcalender', [FullCalenderController::class, 'index']);
Route::get('/groups/{kelas:slug}/preview/index', [PreviewController::class, 'index']);
});
Route::post('/profile', [ProfileController::class, 'upload']);
Route::post('/groups/quiz/question', [QuestionsController::class, 'store'])->middleware('auth');
Route::post('/groups/quiz/index', [TimeController::class, 'store']);
Route::resource('/profile', ProfileController::class)->middleware('auth');
Route::resource('/classes/index', ClassesController::class)->middleware('auth');
Route::resource('/groups/members/addmember', EmailController::class)->middleware('auth');
Route::resource('/editprofile', ProfileController::class);
Route::post('fullcalenderAjax', [FullCalenderController::class, 'ajax']);


// Route::post('kirim', [EmailController::class, 'kirim']);

Answer 1

试试这段代码并更新你的控制器和路由名

/**
* Update the specified resource in storage.
*
* @param  IlluminateHttpRequest  $request
* @param  AppModelsUser  $user
* @return IlluminateHttpResponse
*/
public function update(Request $request, User $user, $id)
{

$User = User::find($id);
// $User->name = request('name');
// $User->tanggal_lahir = request('tanggal_lahir');
// $User->tempat_lahir = request('tempat_lahir');
// $User->jenis_kelamin = request('jenis_kelamin');
// $user->agama = request('agama');
// $user->profile = request('profile');
// $User->save();
$attributes = $request->validate([
'name' =>'required',
'tanggal_lahir'=>'required',
'tempat_lahir'=>'required',
'jenis_kelamin'=>'required',
'agama'=>'required',
'profile'=>'required',
]);
if( isset($attributes['nameImages']) )
{
$name = $request->file('nameImages')->getClientOriginalName();
$attributes['nameImages'] = $request->file('nameImages')->storeAs('public/users/avatars', $name);
}
$profiles->update($attributes);
return json_encode(array('statusCode' => 200));

}

in you form

<form action="{{ route('Name of Route') }}" method="post" enctype="multipart/form-data">
@csrf

@method('PATCH')
</form>

路线

Route::PATCH('FolderName/update', [ClassController::class ,'update'])->name('Name.update');