Filepond 预览为空/不可见,即使文件已加载
Filepond preview empty / invisible even though files are loaded
我正在尝试使用其 ImagePreview 插件设置 FilePond,但即使 filepond 清楚地加载了文件,也出现了一些混乱,导致预览列表仅包含灰色方块。即使正确加载图像数据(例如,将正确的文件名放入 filepond--file-info-main
范围内),甚至图像名称也不可见。并且控件是可点击的,但也是不可见的。
我假设一些 css 正在干扰,但我已经尝试从我的项目中删除 bootstrap 和我的自定义样式,但它没有改变任何东西。无论是否启用任何插件,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 在我的应用程序的 class 构造函数中初始化(我也尝试将所有内容从 class 移到 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,
}
)
}
//...
我已经在这个 codesandbox 中创建了我的项目的精简版本:
在沙盒中摆弄我的 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
是关键。
在设置包含 filepond 的 forms/fieldsets 的不透明度样式时要小心。
我正在尝试使用其 ImagePreview 插件设置 FilePond,但即使 filepond 清楚地加载了文件,也出现了一些混乱,导致预览列表仅包含灰色方块。即使正确加载图像数据(例如,将正确的文件名放入 filepond--file-info-main
范围内),甚至图像名称也不可见。并且控件是可点击的,但也是不可见的。
我假设一些 css 正在干扰,但我已经尝试从我的项目中删除 bootstrap 和我的自定义样式,但它没有改变任何东西。无论是否启用任何插件,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 在我的应用程序的 class 构造函数中初始化(我也尝试将所有内容从 class 移到 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,
}
)
}
//...
我已经在这个 codesandbox 中创建了我的项目的精简版本:
在沙盒中摆弄我的 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
是关键。
在设置包含 filepond 的 forms/fieldsets 的不透明度样式时要小心。