问题描述
我正在尝试从imagePreviewMaxHeight
设置filepond-plugin-image-preview plugin
,但是无法识别。预览插件上的所有属性似乎都不存在于FilePond对象上。
这是我的代码:
import React,{ useState } from 'react'
import { FilePond,registerPlugin } from 'react-filepond'
import FilePondpluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'
import FilePondpluginImagePreview from 'filepond-plugin-image-preview'
import 'filepond/dist/filepond.min.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'
registerPlugin(FilePondpluginImageExifOrientation,FilePondpluginImagePreview)
const ImageUploaderPage = () => {
/* Needed to add typ any below since prop files seems to use type FilePondFile but onupdatefiles
on the other hand accepts ActualFileObject and some other types but not FilePondFile. */
const [files,setFiles] = useState<any[]>([])
return (
<div>
<h1>Image Uploader</h1>
<FilePond
acceptedFileTypes={['image/png','image/jpeg']}
files={files}
onupdatefiles={setFiles}
allowMultiple={true}
imagePreviewMaxHeight={100}
server="/api"
labelIdle="Choose files or drag them here."
/>
</div>
)
}
export default ImageUploaderPage
我正在使用TypeScript,但在其他地方也遇到了一些问题,并添加了注释,以防在这里也可能成为问题。
由于显示了所选图像,显然已注册了预览插件...但是当我使用oninit和ref访问FilePond对象时,我可以确认不存在任何插件道具,只有默认的道具。
编辑:我发现可以使用的属性-styleItemPanelAspectRatio
(应将其设置为格式为1而不是1:1的字符串值,例如stylePanelAspectRatio
。所以我现在很高兴...但是上面的问题仍然存在。
解决方法
这似乎是库中的一个问题,因为打字稿类型设置不正确。
解决方案::临时解决方法是在引发错误的属性上方添加// @ts-ignore
。即FilePondPluginImagePreview
中的属性,例如imagePreviewHeight
。