Filepond 预览为空/不可见，即使文件已加载答案

【问题标题】：Filepond preview empty / invisible even though files are loadedFilepond 预览为空/不可见，即使文件已加载
【发布时间】：2021-01-24 17:19:39
【问题描述】：

我正在尝试使用其 ImagePreview 插件设置 FilePond，但即使 filepond 清楚地加载了文件，但还是有些混乱，导致预览列表仅包含灰色方块。即使图像数据已正确加载（例如，正确的文件名放在 filepond--file-info-main 范围内），甚至图像名称也不可见，并且控件是可点击的，但也是不可见的。

我假设某些 css 正在干扰，但我已经尝试从我的项目中删除引导程序和自定义样式，但它没有改变任何东西。无论是否启用任何插件，Filepond 的行为都是相同的（使用图像预览插件，灰色项目会变得更高，我假设它是固定高度）。

css 是从 vendor.js 文件中的 filepond 导入的

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

【问题讨论】：

我认为如果你在 codesandbox.io 上创建一个测试用例会更快，这样我们就可以立即看到问题，而无需先复制 repo。

标签： javascript css webpack filepond

【解决方案1】：

在沙箱中摆弄我的 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 是关键。

在设置包含文件池的表单/字段集的不透明度时要小心。

【讨论】：