时间戳

首页 > 解决方案 > Livewire 和 FilePond。更改图像顺序

javascript - Livewire 和 FilePond。更改图像顺序

问题描述

我正在使用 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' }}">我希望在用户拖动新图片成为第一张图片后，这张图片会更新。

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

谢谢！

标签： javascriptlaravellaravel-livewirefilepond

解决方案

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

我将此添加到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);
                    });
                },
            });

这将删除以前上传的图像并使用新订单重新上传。

推荐阅读