如何使用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 的功能显示带有旋转 svg 的上传状态，在上传过程中和完成时显示绿色状态。

我尝试使用 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'

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

How to get the progress on file upload using filepond?

file-upload

django-rest-framework

vue.js

nuxt.js

filepond