更新和上传图像Laravel 8

Question

因此，我尝试创建一个更新配置文件并同时上传一个图像，但我只能在没有图像的情况下才能做到这一点。我想让ajax可以在不重新加载页面的情况下进行更新。所以我想出了办法，有人能给我一个线索去做，我不知道下一步该做什么。谢谢你之前。

在此，我认为：

@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 App\Http\Controllers;

use App\Models\Kelas;
use App\Models\User;
use Faker\Provider\Image;
use Illuminate\Http\Request;
use Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\DB;


class ProfileController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    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 \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\User  $user
     * @return \Illuminate\Http\Response
     */
    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  \App\Models\User  $user
     * @return \Illuminate\Http\Response
     */
    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  \Illuminate\Http\Request  $request
     * @param  \App\Models\User  $user
     * @return \Illuminate\Http\Response
     */
    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  \App\Models\User  $user
     * @return \Illuminate\Http\Response
     */
    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 App\Http\Controllers\ClassesController;
use App\Http\Controllers\QuestionsController;
use App\Http\Controllers\PostsController;
use App\Http\Controllers\MemberController;
use App\Http\Controllers\PasswordController;
use App\Http\Controllers\EmailController;
use App\Http\Controllers\TimeController;
use App\Models\Kelas;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\LoginController;
use App\Http\Controllers\ProfileController;
use App\Http\Controllers\DiscoverController;
use App\Http\Controllers\MessagesController;
use App\Http\Controllers\FolderController;
use App\Http\Controllers\HomeController;
use SebastianBergmann\CodeCoverage\Report\Html\Dashboard;
use Symfony\Component\HttpKernel\Profiler\Profile;

use App\Http\Controllers\FullCalenderController;
use App\Http\Controllers\PreviewController;

/*
|--------------------------------------------------------------------------
| 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  \Illuminate\Http\Request  $request
     * @param  \App\Models\User  $user
     * @return \Illuminate\Http\Response
     */
    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));
        
    }

以你的形式

 <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');