Vue FilePond 使用教程

2026-01-17 08:53:49作者：史锋燃Gardner

项目介绍

Vue FilePond 是一个方便的 FilePond 适配器组件，FilePond 是一个 JavaScript 库，可以上传任何你扔给它的内容，优化图像以加快上传速度，并提供出色的可访问性、流畅的用户体验。如果你想要在 Vue 2 中使用 Vue FilePond，请使用 v6 版本的插件。

项目快速启动

安装

首先，你需要安装 Vue FilePond 及其依赖：

npm install vue-filepond filepond

引入和使用

在你的 Vue 项目中引入 Vue FilePond 并使用它：

<template>
  <div id="app">
    <file-pond
      name="test"
      ref="pond"
      label-idle="Drop files here"
      v-bind:allow-multiple="true"
      accepted-file-types="image/jpeg, image/png"
      server="/api"
      v-bind:files="myFiles"
      v-on:init="handleFilePondInit"
    />
  </div>
</template>

<script>
// 引入 Vue FilePond
import vueFilePond from "vue-filepond";

// 引入 FilePond 样式
import "filepond/dist/filepond.min.css";

// 引入 FilePond 插件
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";

// 创建组件
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);

export default {
  name: "app",
  data: function () {
    return {
      myFiles: ["cat.jpeg"],
    };
  },
  methods: {
    handleFilePondInit: function () {
      console.log("FilePond has initialized");
    },
  },
  components: {
    FilePond,
  },
};
</script>

应用案例和最佳实践

在 Nuxt.js 中使用

在 Nuxt.js 中使用时，最好将 FilePond 包裹在 <no-ssr> 标签中：

<template>
  <no-ssr>
    <file-pond />
  </no-ssr>
</template>

浏览器中使用

在浏览器中直接使用 Vue FilePond：

<!DOCTYPE html>
<html>
<head>
  <title>Vue in Browser</title>
  <link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css" />
  <link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" />
</head>
<body>
  <div id="app">
    <file-pond></file-pond>
  </div>
  <script src="https://unpkg.com/filepond-plugin-image-preview"></script>
  <script src="https://unpkg.com/filepond"></script>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-filepond@6"></script>
  <script>
    new Vue({
      el: "#app",
      components: {
        FilePond: vueFilePond.default(FilePondPluginImagePreview),
      },
    });
  </script>
</body>
</html>