反应Filepond加载初始图像不起作用

不起作用"/>

反应Filepond加载初始图像不起作用

我在使用Filepond for React时遇到了一些麻烦。当前，我想在加载页面时预加载用户的个人资料图片。我尝试了两种不同的方法，但都没有成功：

首先，我尝试像这样使用Filepond的服务器加载选项：

<FilePond
   ref={pond}
   ... other props here
   files={[
   {
     source: this.props.user.id,
     options: {
     type: 'local'
   }
   }
   ]}
   server={{
   load: (userId, load) => {
   fetch(fetchDomain + "/profiles/" + userId)
     .then(res => res.blob())
     .then(blob => {
        console.log('blob is: ', blob)
        return load
     })
   }
   }}
/>

我从在相同域上运行的Express后端获取，并返回s3图片网址。这将导致无限的加载情况，并且永远不会加载图片。我一直在对此尝试进行小的更改以修复它，但始终无法使其工作。在某些时候，当我弄乱代码时，它将完成加载，但是图像将是灰色/不可用，没有错误消息。

[我采取的另一种方法只是将“文件”设置为图像URL，但这也不起作用。同样的结果，一个灰色的图像，我可以通过单击“删除项目”按钮将其清除。但是，我确实注意到，如果该URL是base64 URL，它将实际上正确加载图像。

我已经调试了几个小时。我在这里缺少什么吗？

我不确定是否相关，但是文件顶部的设置如下：

import 'filepond/dist/filepond.min.css';
import CropperEditor from './Cropper';
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginImageCrop from "filepond-plugin-image-crop";
import FilePondPluginImageResize from "filepond-plugin-image-resize";
import FilePondPluginImageTransform from "filepond-plugin-image-transform";
import FilePondPluginImageEdit from "filepond-plugin-image-edit";
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
const fetchDomain = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_FETCH_DOMAIN_PROD : process.env.REACT_APP_FETCH_DOMAIN_DEV;

// Register the plugins for filepond
registerPlugin(
  FilePondPluginFileValidateType,
  FilePondPluginImageExifOrientation,
  FilePondPluginImagePreview,
  FilePondPluginImageCrop,
  FilePondPluginImageResize,
  FilePondPluginImageTransform,
  FilePondPluginImageEdit,
);

const pond = React.createRef();

[这是我摆脱了FilePondPluginImagePreview以外的所有插件并使用第一种方法后，加载时组件外观的图片：

It says undefined...

在进一步阅读了文档之后，我现在对于应该加载还是获取感到困惑。

我当时错误地理解了服务器的加载和获取功能。我必须先获取图像URL，然后在服务器中使用访存或加载，才能从该URL获取文件，然后将其转换为Blob格式。这也可以与服务器端点配合使用，就像我最初尝试做的那样，但是您必须确保服务器返回文件而不是URL。我猜它可能会返回一个URL，但是您必须对该URL进行另一个提取，然后将其转换为Blob。

这个问题的答案实际上是我所做的。

File Preview in React FilePond not showing up when setting initial file