温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - How to define an initial image preloaded in filepond?
filepond javascript jquery

javascript - 如何定义预加载在filepond中的初始图像?

发布于 2020-04-13 11:22:48

我正在对记录进行编辑的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/',''),
                }
            }
        }
    ]
});

现在像这样显示

在此处输入图片说明

但我应该这样显示 在此处输入图片说明

查看更多

提问者
José Cabrera
被浏览
15
Mostafa Mohsen 2020-02-03 03:20

我遇到了同样的问题,此问题已解决:

/*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 */
        }
    ]
});

根据文档“设置初始文件”下