如何调用控制器内的函数？

Question

我为我的 Web 应用程序构建了一个产品编辑页面，其中包含标准输入字段和按钮。此外，我还实现了图像的拖放功能。但是，我遇到了图像存储问题。

目前，当用户拖放图像时，它会自动保存到本地存储，尽管我不想在用户确认更改之前不存储它。相反，我将图像名称存储在数据库中。

为了解决这个问题，我实现了一个删除功能，用于检查本地存储中是否存在图像，并在必要时将其删除。当用户上传新图片时会触发此功能，确保只存储最新的图片。

但是，我遇到了一个问题。如果用户决定取消产品编辑，旧图像将被删除，数据库中不会留下与产品关联的图像。

为了纠正这个问题，我知道我需要将删除功能链接到保存按钮。因此，当单击保存按钮时，应删除旧图像，并将新图像保存到数据库中。

为了实现这一目标，我创建了一个新函数来在按下按钮时调用删除图像函数。但是，我遇到了错误：

未捕获类型错误：无法读取未定义的属性（正在读取 ‘发出’)。

我尝试了各种解决方案，包括使用@livewireScript，但没有成功。

以下是我认为的相关代码片段：

<div class="flex-1 relative">
    <livewire:add-products :product="$product"/>
    <div class="absolute bottom-5 right-5 flex space-x-2">
        <button id="submitBtn" type="submit" onclick="window.livewire.emit('deleteDroppedImage')"
                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            Submit
        </button>
        <button onclick="history.back()" type="button"
                class="focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center" >
            Cancel
        </button>
    </div>
</div>

这是我创建的用于删除放置的图像的函数：

<div>
    <img class="object-contain size-80 mx-auto rounded-lg mt-6 border-2 border-slate-400"
         src="{{$url}}"
         alt="Product Image">

    <input value="{{$url}}" name="productImg" hidden>
    <div
        class="flex mt-5 justify-center items-center"
        x-data="drop_file_component()">
        <div
            class="py-6 w-96 rounded border-dashed border-2 flex flex-col justify-center items-center"
            x-bind:class="dropingFile ? 'bg-gray-400 border-gray-500' : 'border-gray-500 bg-gray-200'"
            x-on:drop="dropingFile = false"
            x-on:drop.prevent="
                handleFileDrop($event)
            "
            x-on:dragover.prevent="dropingFile = true"
            x-on:dragleave.prevent="dropingFile = false">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
            </svg>
            <div class="text-center" wire:loading.remove wire.target="files">Drop Your Files Here</div>
            <div class="mt-1" wire:loading.flex wire.target="files">
                <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <div>Processing Files</div>
            </div>
        </div>

    </div>

    <script>
        function drop_file_component() {
            return {
                dropingFile: false,
                handleFileDrop(e) {
                    if (event.dataTransfer.files.length > 0) {
                        const files = e.dataTransfer.files;
                    @this.uploadMultiple('files', files,
                        (uploadedFilename) => {}, () => {}, (event) => {}
                    )
                    }
                }
            };
        }
    </script>
</div>

我还确保删除功能已正确链接到控制器中的 Livewire 组件：

    public function deleteDroppedImage()
    {
        \Log::info('URL: ' . $this->url); // Log the URL
        \Log::info('Product picture: ' . $this->product->picture); // Log the product picture

        if ($this->url != 'https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg') {
            $imagePath = '/photos/' . $this->product->picture;
            \Log::info('Image path: ' . $imagePath); // Log the image path

            if (Storage::disk('public')->exists($imagePath)) {
                Storage::disk('public')->delete($imagePath);
            } else {
                \Log::info('Image not found at path: ' . $imagePath); // Log if the image is not found
            }
        }
    }

如果您能提供有关解决此问题的指导，我将不胜感激。预先感谢您的协助！

编辑：我的控制器中也有这个（删除功能所在的位置）：

protected $listeners = ['deleteDroppedImage' => 'deleteDroppedImage'];

Answer 1

处理这种情况的最佳方法是在编辑产品时利用 Livewire 的临时上传目录，直到用户提交更改。 在此之前不要更新数据库中的图像名称。

所有临时文件将被自动删除。 Livewire 会清理超过 24 小时的文件。

但是，一旦用户提交更改，您可能需要用新图像更新（删除和替换）图像。