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

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