尝试使用filepond处理字体文件

Question

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

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

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

我尝试上传 ttf 和 otf 文件。

Answer 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>

Answer 2

Mime 类型检测大部分来自浏览器。如今的浏览器似乎缺乏对这些现代字体类型的正确检测。

如上面的答案所述，您应该进行一些自定义验证。

您可以使用一点 Javascript 检查您的浏览器认为它是什么。

document.querySelector('input').addEventListener('change', function() {
  
  document.querySelector('p').textContent = this.files[0].type;
  
});

<label for="file">Select a file to show MIME type</label>
<input id="file" type="file"/>
<p></p>