CDN -filepond 在我的项目中使用 node-js、express、e.j.s-layouts 并且无法获得 image__preview 我使用 CDN 来安装 filepond

如何解决CDN -filepond 在我的项目中使用 node-js、express、e.j.s-layouts 并且无法获得 image__preview 我使用 CDN 来安装 filepond

我尝试使用 filepond。我使用 cdn 在我的 ejs mainlayout.ejs 文件中安装了 filepond 和图像预览插件。代码是。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link
      href="https://unpkg.com/filepond/dist/filepond.css"
      rel="stylesheet"
    />
    <link
      href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
      rel="stylesheet"
    />

    <script
      defer
      src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"
    ></script>
    <script
      defer
      src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"
    ></script>

    <script
      defer
      src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js"
    ></script>
    <script defer src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script src="javaScripts/fileUplodes.js"></script>

    <title>books</title>
    <style>
      body {
        background-color: rgba(190,186,180,0.288);
      }
    </style>
  </head>
  <body>
    <div class="container">

这是我的头部标签。

有 3 种安装 filepond 的方法。

npm，
cdn,
嵌入文件。

在cdn中。我给了 css 链接

<link
      href="https://unpkg.com/filepond/dist/filepond.css"
      rel="stylesheet"
    />
    <link
      href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
      rel="stylesheet"
    />

我也给了脚本标签。

<script
      defer
      src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"
    ></script>
<script defer src="https://unpkg.com/filepond/dist/filepond.js"></script>

我使用另一个js文件来注册插件和解析。

    FilePondPluginImagePreview,FilePondPluginImageResize,FilePondPluginFileEncode
); 

console.log("filepond registed.....")
FilePond.parse(document.body);

我以文档中给出的形式为输入文件提供了一类文件池。

<form action="/books" method="POST" enctype="multipart/form-data">
<label>cover image:</label>
  <input type="file" name="cover"  class="filepond"/>
  <br />
</form>

我的页面没有变化。输入看起来像。

我什至尝试使用。

const input = document.querySelector("input[type='file']");
    const pond = FilePond.create(input);

没有变化。如果我做错了，请纠正。这是 git 仓库 enter link description here

CDN -filepond 在我的项目中使用 node-js、express、e.j.s-layouts 并且无法获得 image__preview 我使用 CDN 来安装 filepond

如何解决CDN -filepond 在我的项目中使用 node-js、express、e.j.s-layouts 并且无法获得 image__preview 我使用 CDN 来安装 filepond

相关推荐