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获取文件上传进度？

1 个答案: