Filepond 在 Laravel Livewire 中调整大小

Question

如果我到了这一点，我会诚实地浏览并尝试每一个可能的例子。我的另一个选择是使用干预，但如果这是文件池中的一个选项，它应该可以工作。

老实说，我需要一双新眼睛，因为我可能遗漏了一些东西。

问题

问题是文件未按调整大小保存。它们仍然保存为全尺寸上传。我正在尝试将所有图像的大小调整为 600x600，但是当我加载一个 2mb 的文件 1600x1000 时，它不会调整它的大小。文件以原始格式保存。

问题 2 这是新的，上传的第一张图片会从预览中消失，但如果我保存它就会保存它。这个快把我逼疯了。

我的Blade文件

 <x-filepond wire:model="photos"  multiple/>

FilePond 组件


 <div 
     
            wire:ignore
    
            x-data=""
            x-cloack
            x-init="
                        FilePond.registerPlugin(FilePondPluginImagePreview , FilePondPluginImageResize);
                        allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
                        FilePond.setOptions({
                
                            server: {
                                process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) =>{
                                    @this.upload('{{ $attributes['wire:model']}}', file, load, error, progress)
                                },
                
                                revert: (filename, load) => {
                                    @this.removeUpload('{{ $attributes['wire:model'] }}', filename, load)
                                },
                            },

                            
                
                        });

                        const  pond = FilePond.create($refs.input,{
                            acceptedFileTypes: ['image/png', 'image/jpeg', 'image/jeg'],
                            imagePreviewHeight: 270,
                            allowImageResize: true,
                            imageResizeTargetWidth: 600,
                            imageResizeTargetHeight: 600,
                            imageResizeMode: 'contain',
                            imageResizeUpscale: 'false',

                        });

                        this.addEventListener('pondReset', e => {
                            pond.removeFiles();
                        });           
    
            " 
       
            >
            
            <input type="file" x-ref="input">

Livewire 组件

public $photos = [];

....

   if($this->photos){
            foreach ($this->photos as $photo) {
                $storedImageUrl = $photo->store('photos');
                $photos = new Images;
                $photos->url = $storedImageUrl;
                $photos->post_id = $post->id;
                $photos->save();
            }

        }

Answer 1

您必须注册图像转换插件才能应用更改。

调整大小插件仅计算所需的大小更改。这是一个单独的插件，因为一些开发人员希望在服务器上应用更改。

<div wire:ignore
     x-data=""
     x-cloack
     x-init="FilePond.registerPlugin(
         FilePondPluginImagePreview, 
         FilePondPluginImageResize, 
         FilePondPluginImageTransform <--
     );

Filepond 在 Laravel Livewire 中调整大小

Filepond Resize In Laravel Livewire

laravel

filepond

laravel-livewire