javascript - React FilePond 预览 [ 文件海报 ] 不工作
问题描述
我的 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>
);
}
}
解决方案
如果你像我的情况一样不断收到 CORS 错误,你可以试试这个 hack: + 克隆海报插件并使其成为你自己的插件。+ 在海报插件的源代码中找到并删除此行:img.crossOrigin = 'Anonymous';
推荐阅读
- typescript - 忽略 TypeScript 中的 catch 子句中的某些错误类型
- jhipster - 启用服务器端 swagger-ui
- json - 在 YAML 中对对象进行字符串化
- react-native - 将 MP3 文件从服务器保存到反应原生项目中的特定文件夹
- amazon-web-services - AWS SAM:具有两个触发事件的 Lambda:Visualizer 未显示 S3 触发事件(但触发器仍在工作)
- python - Python从单独文件夹中的jupyter笔记本访问excel文件
- fpga - 使用 PC 对 FPGA 施加激励
- java - Java Callable 和 Future 没有异步运行
- arm - Cortex-X1 上的内存延迟
- java - 通话后(应用程序关闭时)应该会出现一个浮动小部件