我正在為我的項目開發一個頭像上傳器。到目前為止一切都很好，今天早上我沒有遇到任何問題。過了一會兒，轟隆隆。死亡和毀滅。非常悲傷。當我第一次選擇一個文件時，它會立即彈出裁剪工具，并且工作正常。如果我嘗試上傳不同的文件，裁剪工具就會消失，甚至不會顯示圖像的預覽。我的系統如何運作？我使用 Laravel 框架作為后端，并使用 Laravel Livewire 包作為前端功能。Livewire 允許我用 PHP 編寫類似 Vue 的組件。這是我正在處理的表格。每次 Livewire 在輸入中看到新文件時，該組件都會刷新。<label for="image-upload">    <div class="w-full mt-4 button"><i class="far fa-fw fa-upload"></i> Drag and drop, or <b>browse</b></div></label><input id="image-upload" type="file" wire:model="image" class="hidden" accept="image/png, image/gif, image/jpeg">@if($image)    <div id="avatar-preview" class="w-full" style="height: 300px;"></div>    <script>        new Croppie(document.querySelector('#avatar-preview'), {            viewport: { width: 200, height: 200, type: 'circle' },            enforceBoundary: true,        }).bind('{!! $image->temporaryUrl() !!}');    </script>    <button type="submit" class="w-full mt-16 button is-green">Submit new avatar</button>@endif我使用 Croppie JS 包作為裁剪工具。它要求我要么向它傳遞一個img它將附加到的元素，要么向它傳遞一個適合的容器。我選擇了一個容器，這樣我就可以控制裁剪工具的大小。當我將圖像上傳到輸入時，Livewire 將獲取圖像，驗證它是圖像并且不傳遞特定大小，然后將圖像上傳到臨時目錄。回$image->temporaryUrl()顯該臨時文件的路徑。當文件上傳完成并且臨時圖像準備就緒時，Livewire 通過 AJAX 僅刷新組件。此時，我嘗試創建一個新的 Croppie 實例，將其附加到我的預覽容器，并將臨時圖像綁定到它。這適用于第一個文件上傳！然后，當我嘗試更改文件（就像用戶可能的那樣）時，整個實例都會消失。我嘗試檢查再次實例化 Croppie 是否存在問題，因為在我看來，如果刷新該組件，創建該工具的新實例應該不是問題。<script>    if (typeof crop === 'undefined') {        console.log('crop undefined');        let crop = new Croppie(document.querySelector('#avatar-preview'), {            viewport: { width: 200, height: 200, type: 'circle' },            enforceBoundary: true,        }).bind('{!! $image->temporaryUrl() !!}');    } else {        console.log('crop defined');        crop.bind('{!! $image->temporaryUrl() !!}');    }    console.log('crop finished');</script>第一次上傳時會出現“未定義”和“完成”日志，但刷新時不會發生任何情況。所以我也測試了這樣做......@if($image)    <img src="{{ $image->temporaryUrl() }}">@endif至少要確保預覽正常工作，你瞧，它確實如此！最大的問題是，即使 Croppie 不刷新，也不會出現錯誤或警告。它似乎根本不執行<script>標簽中的內容。有什么建議或建議嗎？