如何使用 filepond 获取文件上传进度？

Question

我有一个 API 端点，它适用于 PUT 请求以更新用户信息，例如用户头像。这个 API 是建立在 Django 之上的。在我的前端，我使用 NUXT 使用 FilePond 上传文件，我做了以下操作：

<template>

        <section class="section">
            <div class="container">

            <file-pond
                name="test"
                ref="pond"
                label-idle="Drop files here..."
                v-bind:allow-multiple="true"
                accepted-file-types="image/jpeg, image/png"
            />

            <vs-button success @click='userinfo_put_avatar'>File upload data</vs-button>
            </div>
        </section>

</template>

<script>
import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

let FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);

export default {
    components: {
        FilePond,
    },
    methods: {
        async userinfo_put_avatar() {
            let file = this.$refs.pond.getFiles(0) 
            let fileupload = new FormData();
            fileupload.append('avatar', file)
            let config = {
                 headers: {
                    'Content-Type': 'multipart/form-data'
                 }
            }           
            let data = await this.$axios.put('user-info/', fileupload, config);
        },
   }

};
</script>

这对我很有效。但我希望 Filepond 的功能可以在上传过程中和完成时显示绿色状态。

我尝试使用pond.processFile(0)，但它没有上传文件。 我尝试使用FilePond.setOptions()，但它给了我一个错误setOptions is not a function。如果这可以以某种方式工作。 我将能够使用GITHUB ISSUE LINK中的以下代码覆盖 onaddfileprogress 事件

FilePond.setOptions({
  instantUpload: true,
  allowImagePreview: false,
  server: {
    url: '/images',
    process: {
      url: '/upload',
    },
    revert: '/revert',
    restore: '/restore/',
    load: '/load/',
  },
  onremovefile: function(error, file) {
    if (file.serverId) {
      let input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'DeletedFilepondImages';
      input.value = file.serverId;
      uploadForm.appendChild(input);
    }
  },
  onaddfilestart: function(file) {
    console.log(`onaddfilestart`);
    buttonForm.classList.add('filepondUpload');
    buttonForm.setAttribute('disabled', 'true');
  },
  onaddfileprogress(file, progress) {
    console.log(`onaddfileprogress`);
    buttonForm.classList.remove('filepondUpload');
    buttonForm.removeAttribute('disabled');
  },
});

// get a reference to the input element
const filepondInput = document.querySelector(
  '#filepondFileUploader input[type="file"]'
);

// create a FilePond instance at the input element location
const filepondObject = FilePond.create(filepondInput, {
  maxFiles: 5,
  acceptedFileTypes: ['image/*'],
  labelIdle:
    '<div class="image-upload__file-upload-content">Add images</div>',
  files: filepondInitialFiles,
  onprocessfiles() {
    console.log('onprocessfiles');
    buttonForm.classList.remove('filepondUpload');
    buttonForm.removeAttribute('disabled');
  },
});

Answer 1

您需要在组件上定义server 属性。您可以使用v-bind:server="myServer"，然后将其添加到您的组件数据中。

<file-pond
        name="test"
        ref="pond"
        v-bind:server="myServer"/>

export default {
    name: 'app',
    data: function() {
        return {
            myServer: {
                // server config here
            }
        };
    },
    components: {
        FilePond
    }
};

如果需要setOptions，可以从vueFilePond导入

import vueFilePond, { setOptions } from 'vueFilePond'