Question

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

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

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

Answer 1

首先，您必须安装和注册 File Poster 和 File Preview 插件，以下是如何在您的代码中注册它的示例：

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 属性中的端点返回什么并不重要，但我的猜测是，我们必须返回一个文件对象。

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

1 个答案: