尝试使用 filepond 处理字体文件答案

【问题标题】：Try to handle font files with filepond尝试使用 filepond 处理字体文件
【发布时间】：2021-09-06 15:30:07
【问题描述】：

我将使用 vue-filepond 将字体和其他文件上传到我的 vue 项目。不幸的是，没有正确检测到类型 (MIME-Type)。 type 的值为空字符串。

我使用了 filepond-plugin-file-validate-type 插件，但我认为它不能与字体类型一起正常工作。我尝试使用下面的解决方案，但我不知道如何将它与 vue-filepond 一起使用：https://pqina.nl/filepond/docs/api/plugins/file-validate-type/#custom-type-detection。

你能帮我吗？或者你有什么想法？

我已尝试上传 ttf 和 otf 文件。

【问题讨论】：

标签： fonts upload mime-types filepond

【解决方案1】：

基于 vue-filepond 存储库上的 FilePond 模板。

我尚未对此进行测试，但它应该让您了解如何链接自定义文件验证功能（在本例中为 'myValidation'）。

<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:fileValidateTypeDetectType="myValidation"
      v-bind:files="myFiles"
      v-on:init="handleFilePondInit"
    />
  </div>
</template>

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

// Import FilePond styles
import "filepond/dist/filepond.min.css";

// Import FilePond plugins
// Please note that you need to install these plugins separately

// Import image preview plugin styles
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";

// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";

// Create component
const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginImagePreview
);

export default {
  name: "app",
  data: function () {
    return {
      myValidation: (source, type) =>
        new Promise((resolve, reject) => {

            if (source.name.endsWith('woff')) return 'font/woff';

            resolve(type);
        }),
      myFiles: ["cat.jpeg"]
    };
  },
  methods: {
    handleFilePondInit: function () {
      console.log("FilePond has initialized");

      // FilePond instance methods are available on `this.$refs.pond`
    },
  },
  components: {
    FilePond,
  },
};
</script>

【讨论】：