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

【问题标题】：File Preview in React FilePond not showing up when setting initial file设置初始文件时，React FilePond 中的文件预览未显示
【发布时间】：2020-04-12 15:27:31
【问题描述】：

我最近在使用 React filepond 时遇到了很多困难，所以我只需要一些帮助。因此，我可以使用带有 rails 后端和 amazon 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

【问题讨论】：

你能在这里发布一个包含最少可重现代码的代码框链接吗？
@rzwnahmd 在我的第一次编辑中添加了指向它的链接。请检查一下:-)

标签： reactjs filepond

【解决方案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>'
      />

信用从这个链接转到这个asnwer： https://github.com/pqina/filepond/issues/192

【讨论】：