在 Laravel Livewire 中调整文件池大小答案

【问题标题】：Filepond Resize In Laravel Livewire在 Laravel Livewire 中调整文件池大小
【发布时间】：2022-01-06 20:23:46
【问题描述】：

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

老实说，我确实需要一套新的眼光，因为也许我错过了什么。

问题

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

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

我的刀片文件

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

文件池组件


 <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();
            }

        }

【问题讨论】：

标签： laravel laravel-livewire filepond

【解决方案1】：

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

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

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

【讨论】：