时间戳

首页 > 解决方案 > 为什么我的脚本不能在 AJAX 刷新时运行？

javascript - 为什么我的脚本不能在 AJAX 刷新时运行？

问题描述

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

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

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

任何提示或建议？

标签： javascriptphpajaxlaravellaravel-livewire

解决方案

进一步阅读后，Livewire 似乎可以从组件类中发出可由 JavaScript 获取的“事件”。我的问题是由.innerHtml.

在我的组件类中，在updated()处理输入更新时要做什么的函数中，我添加了

$this->emit('avatar_preview_updated', $this->image->temporaryUrl());

然后我将此侦听器添加到我页面的全局 JS 中：

livewire.on('avatar_preview_updated', image => {
    new Croppie(document.querySelector('#avatar-preview'), {
        url: image,
        viewport: { width: 200, height: 200, type: 'circle' },
        boundary: { height: 300 },
        enforceBoundary: true,
    });
});

这会产生预期的结果。

推荐阅读