Warm tip: This article is reproduced from serverfault.com, please click

vue.js-Vue 中的 FilePond

(vue.js - FilePond in Vue)

发布于 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-Property如下所示:

  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 之后发送

我发现了这个 GitHub 问题,这基本上是我的确切问题。

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

    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,
        },
      };
    },
Questioner
Linsane
Viewed
0
Linsane 2021-01-18 17:09:42

所以在尝试了很多之后,似乎有一个错误vue-filepond,当上传带有fileSize > chunkSize.

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