5

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

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

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

1 回答 1

2

首先,您必须安装和注册文件海报文件预览插件,这里是如何在您的代码中注册它的示例:

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但我的猜测是,我们必须返回一个文件对象。

于 2021-02-16T07:52:42.367 回答