为什么我的脚本无法在 AJAX 刷新时运行？

Question

我正在为我的项目开发一个头像上传器。到目前为止一切都很好，今天早上我没有遇到任何问题。过了一会儿，轰隆隆。死亡和毁灭。非常悲伤。

当我第一次选择一个文件时，它会立即弹出裁剪工具，并且工作正常。如果我尝试上传不同的文件，裁剪工具就会消失，甚至不会显示图像的预览。

我的系统如何运作？我使用 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>标签中的内容。

有什么建议或建议吗？

Answer 1

进一步阅读后，Livewire 似乎可以从组件类中发出可由 JavaScript 拾取的“事件”。我的问题是由更改 DOM 内容的自然行为引起的.innerHtml。在我的组件类中，在updated()处理输入更新时要执行的操作的函数中，我添加了$this->emit('avatar_preview_updated', $this->image->temporaryUrl());然后我将此侦听器添加到我的页面的全局 JS 中：livewire.on('avatar_preview_updated', image => {&nbsp; &nbsp; new Croppie(document.querySelector('#avatar-preview'), {&nbsp; &nbsp; &nbsp; &nbsp; url: image,&nbsp; &nbsp; &nbsp; &nbsp; viewport: { width: 200, height: 200, type: 'circle' },&nbsp; &nbsp; &nbsp; &nbsp; boundary: { height: 300 },&nbsp; &nbsp; &nbsp; &nbsp; enforceBoundary: true,&nbsp; &nbsp; });});这会产生所需的结果。