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

【问题标题】：Can I get FilePond to show previews of loaded local images?我可以让 FilePond 显示加载的本地图像的预览吗？
【发布时间】：2020-01-24 14:24:51
【问题描述】：

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

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

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

【问题讨论】：

可以，你必须定义server.load端点，它应该返回一个文件对象pqina.nl/filepond/docs/patterns/api/server/#load
加载端点现在指向一个 PHP 方法，返回一个图像块。我是否必须创建一个 JS 函数才能将该 blob 放入 File 对象中？
不应该这样做
嗯，那我可能会返回错误的数据。如文档中所述，它是 PHP readfile() 输出，标头设置为内联。我看到文件名和文件大小，但没有预览。这是否敲响了我错过了什么的钟声？
关于为什么显示文件大小和名称而不是图像本身的任何想法？

标签： filepond

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

【讨论】：