我可以让 FilePond 显示加载的本地图像的预览吗？

Question

我使用 FilePond 来显示以前上传的具有该load功能的图像。这些文件是可见的，但我没有得到预览（上传文件时得到预览）。

是否可以通过显示文件预览load？

files: [{
    source: " . $profile->profileImage->id . ",
    options: {
        type: 'local',
    }
}],

Answer 1

首先，您必须安装并注册文件海报和文件预览插件，以下是如何在代码中注册它的示例：

import * as FilePond from 'filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
    
FilePond.registerPlugin(
    FilePondPluginImagePreview,
    FilePondPluginFilePoster,
);

然后您必须将该server.load属性设置为您的服务器端点，并向metadata您的文件对象添加一个属性，该属性是服务器上图像的链接：

const pond = FilePond.create(document.querySelector('file'));

pond.server = {
    url: '127.0.0.1:3000/',
    process: 'upload-file',
    revert: null,
    // this is the property you should set in order to render your file using Poster plugin
    load: 'get-file/',
    restore: null,
    fetch: null
};
pond.files = [
    {
        source: iconId,
        options: {
            type: 'local',
            metadata: {
                poster: '127.0.0.1:3000/images/test.jpeg'
            }
        }
    }
];

该source属性是您想要发送到端点的变量，在我的例子中我想发送到/get-file/{imageDbId}。

在这种情况下，属性中的端点返回什么并不重要，load但我的猜测是，我们必须返回一个文件对象。