设置初始文件时，React FilePond 中的文件预览未显示

Question

我最近在 React filepond 上遇到了很多困难，所以我只需要一些帮助。因此，我可以使用带有 Rails 后端和亚马逊 s3 存储的 React filepond 将照片上传到服务器。一切正常，没有问题。现在我正在尝试设置初始图像，但在预览工作时遇到问题。

因此，我在这里从可公开访问的占位符图像设置初始图像：

class UserForm extends Component {
  constructor(props) {
    super(props);
    this.classes  = props.classes;    
    this.state = {     
      files: [{
        source: "https://picsum.photos/200/300",   
        options: {
          file: {
            size: 200
          }
        } 
      }],    
    code omitted for brevity

这是我的 FilePond 组件：

<FilePond
            ref={ref => (this.pond = ref)}
            files={this.state.files}
            allowMultiple={true}
            maxFiles={3}            
            oninit={() => this.handleInit()}
            onupdatefiles={ this.fileChange } 
            allowImageCrop={true}
            imageCropAspectRatio={'1:1'}
            allowImageResize={true}
            imageResizeTargetWidth={100}
            imageResizeTargetHeight={100}
            imageResizeUpscale={false}
            imageResizeMode={'contain'}
            allowImageTransform={true}               
            onpreparefile={ this.prepareFile } 

因此，它应该在预览中加载占位符图像，但这是我看到的：

我缺少任何配置才能显示预览吗？

谢谢！

编辑 1 添加了代码沙箱链接。请注意，如果我删除选项，特别是文件大小，它将抛出一个警告，指出它正在等待大小

https://codesandbox.io/s/react-filepond-live-demo-8s7oc?file=/src/index.js

这是在 filepond 中设置初始文件的文档：https://pqina.nl/filepond/docs/patterns/api/filepond-object/#setting-initial-files

Answer 1

我想到了！这是一个工作代码沙箱链接： https://codesandbox.io/s/react-filepond-live-demo-2sdn0 ?file=/src/index.js

您需要像这样设置服务器配置：

<FilePond
        files={files}
        allowMultiple={false}
        server={{
          load: (source, load, error, progress, abort, headers) => {
            var myRequest = new Request(source);
            fetch(myRequest).then(function(response) {
              response.blob().then(function(myBlob) {
                load(myBlob);
              });
            });
          }
        }}
        labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
      />

信用来自此链接： https ://github.com/pqina/filepond/issues/192