Vue 中的 FilePond - 自定义标题答案

【问题标题】：FilePond in Vue - Customize HeadersVue 中的 FilePond - 自定义标题
【发布时间】：2021-01-15 18:33:49
【问题描述】：

我目前在我的应用程序中通过Vue-Adapter 使用FilePond，它工作正常。

我当前的，与这个问题相关的代码如下所示：

<template>
  <v-layout>
    <v-flex class="text-center">
      <FilePond
        ref="pond"
        name="file"
        chunk-uploads="true"
        :chunk-size="chunkSize"
        class-name="my-pond"
        label-idle="Drop files here..."
        :allow-multiple="allowMultiple"
        :files="myFiles"
        :server="server"
        @init="handleFilePondInit"
        @error="error"
        @processfile="updatefiles"
        @addfile="testlog"
      />
    </v-flex>
  </v-layout>
</template>

server-属性如下所示：

  computed: {
    headers() {
      return {
        Authorization: this.$auth.getToken('local'),
        projectId: this.projectId,
      };
    },
    server() {
      return {
        url: 'http://localhost:3001/api/filepond/',
        process: {
          url: 'process',
          headers: this.headers,
        },
        patch: {
          url: 'patch?id=',
          headers: this.headers,
        },
      };
    },
    chunkSize() {
      return this.$config.chunk_size_byte;
    },
  },

此设置运行良好。 FilePond 按预期工作，并且我的自定义标头被额外注入到 FilePond 提供的标头中。现在我遇到了一个问题，我还需要 process-Request 上的文件名，当 patch-Request 跟随时通常不会发送。

我找到了this GitHub Issue，这基本上是我的确切问题。

但是，如果我将计算出的 server-value 更改为以下代码，则根本不会应用我的标头。

    server() {
      return {
        url: 'http://localhost:3001/api/filepond/',
        process: {
          url: 'process',
          headers: (file, metaData) => ({
            Authorization: this.$auth.getToken('local'),
            projectId: this.projectId,
            filename: file.filename,
          }),
        },
        patch: {
          url: 'patch?id=',
          headers: this.headers,
        },
      };
    },

【问题讨论】：

标签： vue.js nuxt.js filepond

【解决方案1】：

所以在尝试了很多之后，vue-filepond 似乎有一个错误，其中自定义 Header-Functions 仅在使用 fileSize > chunkSize 上传文件时应用。

我打开了一个问题，Rik 暂时提供了解决方法 (https://github.com/pqina/vue-filepond/issues/193)。

【讨论】：