如何在Filepond中显示已加载文件（如编辑页面场景）

• 修正资源类型配置：你当前设置的"type": "local"不符合S3远程资源的场景，需改为"type": "remote"，同时建议添加metadata.poster指定预览图地址，确保Filepond能正确识别并渲染：

[
  {
    "source": "https://[amazon server].amazonaws.com/images/bosYPmxcSO3OzcRn1GJqaXJlC4lBZJ2KDmp8f7oC.png",
    "options": {
      "type": "remote"
    },
    "metadata": {
      "poster": "https://[amazon server].amazonaws.com/images/bosYPmxcSO3OzcRn1GJqaXJlC4lBZJ2KDmp8f7oC.png"
    }
  }
]

• 确认图片预览插件已启用：如果通过npm引入Filepond，需确保安装并注册图片预览插件：

import * as FilePond from 'filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';

FilePond.registerPlugin(FilePondPluginImagePreview);

若使用CDN引入，需在页面中包含预览插件的脚本及样式文件。

• 检查S3存储桶CORS策略：即使图片可直接访问，S3的CORS规则可能限制了项目域名的访问。修改存储桶CORS配置，允许你的Laravel域名发起GET请求：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://你的Laravel项目域名.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

本地开发时可临时设置<AllowedOrigin>*</AllowedOrigin>做测试。

• 验证Filepond初始化配置：确保初始化时未禁用预览功能：

FilePond.create(document.querySelector('#filepond'), {
  allowImagePreview: true,
  allowPreview: true,
  // 其他业务配置
});

内容的提问来源于stack exchange，提问作者Luca Reghellin