Javascript 如何定义在filepond中预加载的初始图像?
我正在做一个记录编辑的laravel视图,其中有一个与之相关联的图像,我需要它在输入文件中显示为预加载,以便在提交时发送相同的图像,或者如果您想更改它Javascript 如何定义在filepond中预加载的初始图像?,javascript,jquery,filepond,Javascript,Jquery,Filepond,我正在做一个记录编辑的laravel视图,其中有一个与之相关联的图像,我需要它在输入文件中显示为预加载,以便在提交时发送相同的图像,或者如果您想更改它 // Turn input element into a pond FilePond.registerPlugin( FilePondPluginFileEncode, FilePondPluginImagePreview, FilePondPluginImageExifOrientation, FilePond
// 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/',''),
}
}
}
]
});
现在是这样
但我应该这样表现
如果模拟文件数据,FilePond将不会加载实际文件,图像预览插件也不会有任何数据显示文件
确保您的
服务器.load
端点返回一个文件对象。我也遇到了同样的问题,通过以下方法解决了它:
/*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 */
}
]
});
根据文件