我正在為我的項(xiàng)目開發(fā)一個(gè)頭像上傳器。到目前為止一切都很好，今天早上我沒有遇到任何問題。過了一會兒，轟隆隆。死亡和毀滅。非常悲傷。當(dāng)我第一次選擇一個(gè)文件時(shí)，它會立即彈出裁剪工具，并且工作正常。如果我嘗試上傳不同的文件，裁剪工具就會消失，甚至不會顯示圖像的預(yù)覽。我的系統(tǒng)如何運(yùn)作？我使用 Laravel 框架作為后端，并使用 Laravel Livewire 包作為前端功能。Livewire 允許我用 PHP 編寫類似 Vue 的組件。這是我正在處理的表格。每次 Livewire 在輸入中看到新文件時(shí)，該組件都會刷新。<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 包作為裁剪工具。它要求我要么向它傳遞一個(gè)img它將附加到的元素，要么向它傳遞一個(gè)適合的容器。我選擇了一個(gè)容器，這樣我就可以控制裁剪工具的大小。當(dāng)我將圖像上傳到輸入時(shí)，Livewire 將獲取圖像，驗(yàn)證它是圖像并且不傳遞特定大小，然后將圖像上傳到臨時(shí)目錄?；?image->temporaryUrl()顯該臨時(shí)文件的路徑。當(dāng)文件上傳完成并且臨時(shí)圖像準(zhǔn)備就緒時(shí)，Livewire 通過 AJAX 僅刷新組件。此時(shí)，我嘗試創(chuàng)建一個(gè)新的 Croppie 實(shí)例，將其附加到我的預(yù)覽容器，并將臨時(shí)圖像綁定到它。這適用于第一個(gè)文件上傳！然后，當(dāng)我嘗試更改文件（就像用戶可能的那樣）時(shí)，整個(gè)實(shí)例都會消失。我嘗試檢查再次實(shí)例化 Croppie 是否存在問題，因?yàn)樵谖铱磥?，如果刷新該組件，創(chuàng)建該工具的新實(shí)例應(yīng)該不是問題。<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>第一次上傳時(shí)會出現(xiàn)“未定義”和“完成”日志，但刷新時(shí)不會發(fā)生任何情況。所以我也測試了這樣做......@if($image)    <img src="{{ $image->temporaryUrl() }}">@endif至少要確保預(yù)覽正常工作，你瞧，它確實(shí)如此！最大的問題是，即使 Croppie 不刷新，也不會出現(xiàn)錯(cuò)誤或警告。它似乎根本不執(zhí)行<script>標(biāo)簽中的內(nèi)容。有什么建議或建議嗎？