Vue 中的 FilePond - 自定义 Headers

Question

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

我目前，对于这个问题相关的代码如下：

<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 按预期工作，我的自定义 headers 被额外注入到 headers FilePond 提供的内容中。现在我运行遇到了一个问题，我在 process-Request 中也需要文件名，当 patch-Request 跟随时通常不会发送文件名。

我发现 this GitHub Issue，这基本上是我的确切问题。

但是，如果我将计算的 server 值更改为以下代码，我的 headers 根本不会应用。

    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,
        },
      };
    },

Answer 1

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

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

Vue 中的 FilePond - 自定义 Headers

FilePond in Vue - Customize Headers

vue.js

nuxt.js

filepond