Livewire 和 FilePond。更改图像顺序

Question

我正在使用 Livewire 和 Filepond 来允许用户将图像上传到图库。

我需要我的用户能够设置图像的顺序并将其保存到数据库中。

Filepond 有一个选项 allowReorder: true 和一个在订单更改时触发的回调 onreorderfiles(files, origin, target)

这是我的上传组件的基础知识

<div
    x-data="{ 'images': null }"
    x-init="
        FilePond.registerPlugin(FilePondPluginImagePreview);
        FilePond.registerPlugin(FilePondPluginImageExifOrientation);
        FilePond.registerPlugin(FilePondPluginFileValidateType);
        FilePond.registerPlugin(FilePondPluginFileValidateSize);
        FilePond.registerPlugin(FilePondPluginImageResize);

        FilePond.setOptions({
            allowMultiple: true,
            allowReorder: true,
            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)
                },
            },
            onreorderfiles(files, origin, target){
                // **** What do I  put here to update the order of the images in my livewire component? ******
            },
        });

        const pond = FilePond.create($refs.input, {
            acceptedFileTypes: ['image/png', 'image/jpeg'],
            maxFileSize: '7MB',
            allowImageCrop: true,
            allowImageResize: true,
            imageResizeTargetWidth: '1000px',
            imageResizeTargetHeight: '1000px',
        });

        pond.on('addfile', (error, file) => {
            if (error) {
                console.log('Oh no');
                return;
            }
            images = true;
        });
    "
>
    <div wire:ignore wire:key="images">
        <div x-show="images == null" class="ex-builder-no-images">
            <i class="fas fa-image"></i>
            <p>There are no images for this experience.
                <br>Upload some below. <br><small>(MAX 10 Images)</small></p>
        </div>
        <div class="form-group text-center">
            <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>
</div>

我还像这样显示画廊中第一张图片的预览（这是画廊的特色图片）<img src="{{ $images ? $images[0]->temporaryUrl() : '/images/placeholder.jpg' }}">我希望在用户将新图片拖动到成为第一个。

如何使用 onreoderfiles() 回调更新在我的 livewire 组件中找到的 public $images = []; 中的图像顺序？

谢谢！

Answer 1

不确定这是否正确，但它似乎有效

我将此添加到 FilePond.setOptions()

FilePond.setOptions({
                allowMultiple: true,
                allowReorder: true,
                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)
                    },
                },

                // Added this ----------------------------------------
                onreorderfiles(files, origin, target){
                    @this.set('images', null);
                    files.forEach(function(file) {
                        @this.upload('images', file.file);
                    });
                },
            });

这会删除之前上传的图片并重新上传新订单。

Livewire 和 FilePond。更改图像顺序

Livewire and FilePond. Change image order

javascript

laravel

filepond

laravel-livewire