如何在FilePond中加载默认图像

Question

根据文档服务器对load的配置，应该返回一个包含头内容的文件对象，但是文件对象意味着什么呢？看上去怎么样？

使用下面的代码，我只能正确地加载图像名，我还需要加载预览图像和文件大小。

Javascript

<script>
    FilePond.registerPlugin(FilePondPluginFileValidateType);
    FilePond.registerPlugin(FilePondPluginFileValidateSize);
    FilePond.registerPlugin(FilePondPluginImagePreview);
    FilePond.registerPlugin(FilePondPluginFilePoster);
    FilePond.setOptions({
        server: {
            process: '/upload',
            revert: '/remove',
            load: '/load/?serverId=',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        }
    });

    const inputElement = document.querySelector('#filepond');
    const pond = FilePond.create(inputElement, {
        files: [
            @foreach ($productItem->galleries as $gallery)
            {
                source: '{{ $gallery->id }}',
                options: {
                    type: 'local',
                }
            },
            @endforeach
        ],
        acceptedFileTypes: ['image/*'],
        maxFileSize: '5MB',
        onremovefile: (error, file) => {
            if (error) {
                console.log('Oh no');
                return;
            }

            console.log('File removed', file.getMetadata('serverId'));
        }
    })
</script>

public function load(Request $request) {
        $file = FileItem::find($request->serverId);

        return response()
        ->json($file->path, 200, [
            'Content-Disposition' => "inline; filename='$file->filename'",
        ]);
    }

Answer 1

我看你用的是拉拉维尔，而不是白手起家。我建议你使用https://github.com/rahulhaque/laravel-filepond

易于使用，如果您想加载一个初始的图像或文件。你只需要一点定制。我就是这样处理的。

        FilePond.registerPlugin(
            FilePondPluginFileValidateType,
            FilePondPluginImagePreview,
        );

        // this is the url of image.
        let url = `{{ $slider->getFirstMedia('sliders')->getUrl() }}`;

        FilePond.setOptions({
            server: {
                url: "{{ config('filepond.server.url') }}",
                headers: {
                    'X-CSRF-TOKEN': "{{ @csrf_token() }}",
                },
                load: (source, load, error, progress, abort, headers) => {
                    // now load it using XMLHttpRequest as a blob then load it.
                    let request = new XMLHttpRequest();
                    request.open('GET', source);
                    request.responseType = "blob";
                    request.onreadystatechange = () => request.readyState === 4 && load(request.response);
                    request.send();
                },
            }
        });

        // don't forget to set options local to tell filepond this is already uploaded
        // parameter sourse ask for url.
        FilePond.create(document.querySelector('#cover'), {
            acceptedFileTypes: ['image/png', 'image/jpeg'],
            files: [{
                source: url,
                options: {type: 'local'},
            }],
        });

飞秒