React Filepond加载初始图像不起作用答案

【问题标题】：React Filepond Loading Initial Images Not WorkingReact Filepond加载初始图像不起作用
【发布时间】：2020-05-11 00:05:08
【问题描述】：

我在使用 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，但这也不起作用。同样的结果，一个灰色的图像，我可以通过单击删除项目按钮来清除它。但是，我确实注意到，如果该 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...

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

【问题讨论】：

标签： javascript node.js reactjs file-upload filepond

【解决方案1】：

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

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

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

【讨论】：