如何定义在 filepond 中预加载的初始图像？

Question

我正在对记录的编辑进行 laravel 视图，其中有一张与之关联的图像，我需要它预加载到输入文件中，这样如果您提交，发送相同的图像，或者如果你想改变它。

 // Turn input element into a pond
FilePond.registerPlugin(
    FilePondPluginFileEncode,
    FilePondPluginImagePreview,
    FilePondPluginImageExifOrientation,
    FilePondPluginFileValidateSize
);
var imagen = '{{ trim($marca->imagen_asociada) }}'
const inputElement = document.querySelector('input[type="file"]');

FilePond.setOptions({
    server: {
        load: imagen.replace('/images/button/','')
    }
});
const pond = FilePond.create(inputElement,{
    files: [
        {
            source: '{{ public_path().'/resources'.trim($marca->imagen_asociada) }}',
            options: {
                type: 'local',

                // mock file information
                file: {
                    name: imagen.replace('/images/button/',''),
                }
            }
        }
    ]
});

现在是这样显示的

但我应该这样展示

Answer 1

如果您模拟文件数据，FilePond 将不会加载实际文件，并且图像预览插件将没有任何数据来显示文件。

确保您的 server.load 端点 returns 是一个文件对象。

Answer 2

我遇到了同样的问题，解决了这个问题：

/*FilePond.setOptions({
    server: {
        load: imagen.replace('/images/button/','')
    }
}); Remove this.*/
const pond = FilePond.create(inputElement,{
    files: [
        {
            source: '{{ public_path().'/resources'.trim($marca->imagen_asociada) }}',
            /*options: {
                type: 'local',

                // mock file information
                file: {
                    name: imagen.replace('/images/button/',''),
                }
            } - Remove this options {} dictionary */
        }
    ]
});

根据文档Under Setting Initial Files

如何定义在 filepond 中预加载的初始图像？

How to define an initial image preloaded in filepond?

javascript

jquery

filepond