React Filepond 加载初始图像不工作

Question

我在使用 Filepond for React 时遇到了一些问题。目前，我想在加载页面时预加载用户的个人资料图片。我尝试了两种不同的方法，但 none 仍然有效：

首先，我尝试像这样使用 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 后端获取运行在同一个域和 returns 一个 s3 图像 URL。这会导致无限加载情况，并且永远不会加载图片。我不断对此进行小的更改以尝试修复它，但始终无法使其正常工作。在某些时候，当我弄乱代码时，它会完成加载，但图像将是 gray/unavailable，没有错误消息。

我采用的另一种方法是简单地将文件设置为图像 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...

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

Answer 1

我错误地理解了服务器对象的加载和获取功能。我必须先获取图像 URL，然后在服务器对象中使用提取或加载，以便从 URL 获取文件，然后将其转换为 blob 格式。这也适用于在服务器对象的加载功能中调用的外部服务器端点，就像我最初尝试做的那样，但您必须确保服务器 return 是一个文件，而不是 URL.好吧，我想它可以 return 一个 URL 但你必须再对 URL 进行一次提取，然后将其转换为 blob。

这个问题的答案基本上就是我所做的。

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

React Filepond 加载初始图像不工作

React Filepond Loading Initial Images Not Working

javascript

file-upload

node.js

reactjs

filepond