React FilePond 预览 [ 文件海报 ] 不工作

Question

我的 FilePond 海报预览代码不起作用，请帮我找出我做错了什么。

我尝试了以下代码的不同变体，但没有成功。

-我尝试启用即时上传（无效）

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

您确定可以在不设置 CORS 标头的情况下访问远程服务器上的文件吗？我预计您的开发者控制台会显示安全警告。

Answer 2

如果你像我的情况一样不断收到 CORS 错误，你可以试试这个 hack： + 克隆海报插件并使其成为您自己的插件。 + 在海报插件的源代码中找到并删除这一行：img.crossOrigin = 'Anonymous';