如何解决Filepond预览为空/即使加载文件也不可见
我正在尝试使用其ImagePreview插件设置FilePond,但是即使filepond清楚地加载了文件,也有些混乱,这导致预览列表仅由灰色方块组成。即使图像数据已正确加载(例如,正确的文件名放在filepond--file-info-main
范围内),图像名称也不可见,并且控件是可单击的,但也不可见。
我认为有些CSS会干扰我,但我已经尝试从项目中删除引导程序和自定义样式,并且没有任何改变。无论是否启用任何插件,Filepond的行为都是相同的(使用图像预览插件,灰色项变得更高,我认为它是固定高度)。
css是从filepond中的vendor.js文件中导入的
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'filepond/dist/filepond.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
Filepond在我的应用程序的类构造函数中初始化(我也尝试将所有内容从该类移出到vendor.js中,但这没有任何改变):
import * as FilePond from 'filepond';
import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
export class FormComponentService {
constructor(form) {
if(typeof form !== "object" || !form.classList.contains("order-form")) { console.log("No correct form supplied"); return; }
this.fieldsets = [...form.querySelectorAll('fieldset')];
this.currentFieldSet = null;
this.prevFieldSet = null;
this.nextFieldSet = null;
this.nextButtons = [...form.querySelectorAll(".next")];
this.prevButtons = [...form.querySelectorAll(".previous")];
this.initFormButtons();
this.initFormComponents();
FilePond.registerPlugin(
// encodes the file as base64 data
FilePondPluginFileEncode,// validates the size of the file
FilePondPluginFileValidateSize,// corrects mobile image orientation
FilePondPluginImageExifOrientation,// previews dropped images
FilePondPluginImagePreview
)
this.pond = FilePond.create(
document.querySelector('input[name=filepond]'),{
allowFileEncode: true,}
)
}
//...
我已在此代码框内创建了项目的精简版本:
https://codesandbox.io/s/flamboyant-swanson-sm87b
解决方法
在沙箱中摆弄CSS之后,我发现了我的问题。我的css包含某个部分,该部分负责更改filepond文件输入所位于的字段集的不透明度。它被滴加到Filepond的CSS中,并导致每个内容都设置为opacity:0
。这是原始样式:
#msform fieldset.active { opacity: 1; }
#msform fieldset {
opacity: 0;
position: absolute;
box-sizing: border-box;
border: 0;
border-radius: 0;
width: 100%;
padding-bottom: 20px;
margin: 0;
}
将#msform fieldset
更改为#msform > fieldset
是关键。
在设置包含文件池的表单/字段集的不透明度时,请当心。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。