Question

我的FilePond Poster预览代码无法正常工作，请帮助我找出我在做错什么。

我尝试了下面显示的代码的不同变体，但是没有运气。

-i尝试启用即时上传功能（无效）

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错误，则可以尝试以下破解： +克隆海报插件，并使其成为您自己的插件。 +在海报插件的源代码中找到并删除以下行：img.crossOrigin = 'Anonymous';

React FilePond预览[File Poster]不起作用

2 个答案: