React FilePond Preview [ File Poster ] не работает

Question

Мой код предварительного просмотра FilePond Poster не работает, пожалуйста, помогите мне найти, что я делаю неправильно.

я пробовал разные варианты кода, который мы видели ниже, но безуспешно.

-Я пытался включить мгновенную загрузку (не работает)

import React, { Component, Fragment } from 'react';
import { FilePond, File, registerPlugin } from 'react-filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
import 'filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css';
import 'filepond/dist/filepond.min.css';
registerPlugin(FilePondPluginImagePreview, FilePondPluginFilePoster);

export default class MyFilePond extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
        };
    }
    handleInit() {
        console.log('FilePond instance has initialised', this.pond);
    }
    render() {
        return (
            <Fragment>
                <FilePond
                    ref={ref => (this.pond = ref)}
                    allowFilePoster={true}
                    instantUpload={false}
                    server={{}}
                    name="image"
                    acceptedFileTypes={['image/*']}
                    oninit={() => this.handleInit()}
                >
                    <File
                        file={{
                            name: 'my-file.png',
                            size: 3001025,
                            type: 'image/png'
                        }}
                        metadata={{poster : 'https://www.pngarts.com/files/3/Spongebob-Squarepants-Transparent.png'}}
                        source="https://www.pngarts.com/files/3/Spongebob-Squarepants-Transparent.png"
            />
                </FilePond>
            </Fragment>
        );
    }
}

Answer 1

Пожалуйста, следуйте приведенной ниже структуре Filepond,

      FilePond.create(el, {
    files: [
        {
            source:1234,
            options: {
                type: 'local',
                file: {
                    name: 'my-file.png',
                    size: 1234,
                    type: 'image/png'
                },
                metadata:{
                    poster: 'https://i.imgur.com/hRliFiT.jpg'
                }
            }
        }
    ]
});

Answer 2

Если вы продолжаете получать ошибку CORS, как в моем случае, вы можете попробовать этот метод: + Клонируйте плагин постера и сделайте его своим собственным плагином. + В исходном коде постера плагина найдите и удалите эту строку: img.crossOrigin = 'Anonymous';

Answer 3

Вы уверены, что можете получить доступ к файлу на удаленном сервере без установки заголовков CORS? Я ожидаю, что ваша консоль разработчика показывает предупреждение безопасности.