使用 Livewire 和 Filepond 编辑模型时处理预先存在的图像

我有一个 Filepond 组件，非常适合将图像上传到帖子。

然而，当我需要编辑帖子及其预先存在的图像时，我正在与 Filepond 作斗争。

我想用 Post 模型预先存在的图像加载 Filepond。目标是允许用户在编辑 Post 模型时上传、删除和重新排序图像，然后更新数据库和文件系统。

这是我到目前为止所拥有的：

<div
        x-data=""
        x-init="
            // Plugins
            FilePond.registerPlugin(FilePondPluginImagePreview);
            FilePond.registerPlugin(FilePondPluginImageExifOrientation);
            FilePond.registerPlugin(FilePondPluginFileValidateType);
            FilePond.registerPlugin(FilePondPluginFileValidateSize);
            FilePond.registerPlugin(FilePondPluginImageResize);

            // Set options
            FilePond.setOptions({
                allowMultiple: true,
                allowReorder: true,
                itemInsertLocation: 'after',
                server: {
                    process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                        @this.upload('images', file, load, error, progress)
                    },
                    revert: (filename, load) => {
                        @this.removeUpload('images', filename, load)
                    },
                },
                // This allows me to reorder the images, essential resetting the $image variable in livewire component when ever th euser reorders the images in filepond
                onreorderfiles(files, origin, target){
                    @this.set('images', null);
                    files.forEach(function(file) {
                        @this.upload('images', file.file);
                    });
                },

            });

            // Create Filepond
            const pond = FilePond.create($refs.input, {
                acceptedFileTypes: ['image/png', 'image/jpeg'],
                
                @if(optional($post)->images) // If we are editing a post and if that post has images
                files: [
                    @foreach($post->images as $image)// Loop through each image for the post
                        {
                            // the server file reference
                            source: '{{ Storage::disk('post_images')->url($post->id . '/' . $image->filename.$image->extension) }}', 
                        },
                    @endforeach
                ],
                @endif
            });

            pond.on('addfile', (error, file) => {
                if (error) {
                    console.log('Oh no');
                    return;
                }
            });
        "
    >
        <div wire:ignore wire:key="images">
                <input
                    id="image-upload"
                    type="file"
                    x-ref="input"
                    multiple
                >

                @error('images.*')
                <p wire:key="error_images" class="mt-2 text-sm text-red-600" id="email-error">{{ $message }}</p>
                @enderror
        </div>
    </div>

然而，这会导致每次用户查看编辑页面时所有图像都会重新上传。

网上有很多关于如何使用 Filepond 和 Livewire 上传图像的信息，但关于如何编辑的信息却很少。

除了每次用户查看编辑页面时重新上传之外，是否有更好的方法来管理图像？

我能够处理模型上预先存在的图像，特别是我能够重新排序图像.

为了处理图像的重新排序，我们需要来自服务器和 Livewire 的唯一标识符上传方式 https://laravel-livewire.com/docs/2.x/file-uploads#js-api它被神奇地为我们处理了。

@this.upload('images', file, load, error, progress)

这很棒，并且可以处理或恢复上传，但是当我们尝试监听 filepond 时会中断onreorderfile事件。 Filepond 知道如何在 DOM 级别处理重新排序，但缺少一个重要信息，即来自服务器的唯一标识符

onreorderfiles(files, origin, target) {
    console.log(file.serverId); // this will be null
}

这是为什么？我们第一次通过文件池添加图像文件数组 https://pqina.nl/filepond/docs/api/instance/properties/#files or 添加文件方法 https://pqina.nl/filepond/docs/api/instance/methods/#adding-files我们使用 Livewire 处理图像@this.upload('images', file, load, error, progress)。这里的加载回调返回的是serverId或者我们需要的唯一标识符，以便 Filepond 可以与后端进行通信。来自 filepond 的加载回调可在服务器进程对象 https://pqina.nl/filepond/docs/api/server/#process但不在onreorderfiles event.

这不太正确，但我们确实知道在哪里可以找到 serverId。深入了解 Livewire 的源代码livewire\livewire\js\UploadManager.js我们会找到 upload 方法，它确实返回 tmpFilename：

this.component.on('upload:finished', (name, tmpFilenames) => this.markUploadFinished(name, tmpFilenames))

问题很明显，因为 onreorderfiles 事件我们没有指定对 filepond 的 load() 方法的任何回调，并且当脚本到达服务器进程对象时load未定义：

onreorderfiles(files, origin, target){
    // omitted code

    @this.upload('images', file.file);

    // omitted code
}

Summary

解决方案是无论如何显式返回成功回调。

更改以下代码块：

server: {
    process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
        @this.upload('images', file, load, error, progress)
},

为此，请记住，livewire 上传方法无论如何都会返回唯一的文件名，但我们需要将其传递给 filepond，并且 load 方法接受响应作​​为参数：

server: {
    process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
        @this.upload('images', file,
            // this is the secret method people have been looking for
            (uploadedFilename) => {
                load(uploadedFilename);
            }, error, progress)
},

嗯，这不是秘密per se因为它记录在 Livewire文件上传 https://laravel-livewire.com/docs/2.x/file-uploads#js-api.