即使我没有收到错误，React FilePond(功能组件)插件也无法正常工作？

Question

我小时候的最终形式的filepond react。我正在尝试将插件注册到其中，但似乎不起作用。

import React from 'react';
import { Form, Field } from 'react-final-form';
import { FilePond, registerPlugin } from 'react-filepond';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
registerPlugin(FilePondPluginFileValidateType);
const FileAdapter = ({ input: {value, onChange}, meta: { touched, submitError }, handleInvalidFileServerResponse, parent }) => (
  <>
  <FilePond
    name="file"
    allowFileTypeValidation={true}
    fileValidateTypeDetectType={ (source, type) => new Promise((resolve, reject) => {
      // Do custom type detection here and return with promise
      console.log('type');
      return resolve(type);
    })}
  />
  </>
)
class ContactForm extends React.Component {
  render() {
      return (
          <>
          <Form
            onSubmit={this.onSubmit}
            initialValues={{ files: [] }}
            render={({ submitError, handleSubmit, submitting, pristine }) => (
              <form className="form-contact text-justify" onSubmit={handleSubmit}>
                  <Field name="files" component={FileAdapter} />
                  <input tabIndex="5" type="submit" disabled={submitting || pristine} value={submitting ? 'Submitting...' : 'Submit'}/>
              </form>
            )}
          />
          </>
      );
  }
}

我尝试使用console.log，但似乎没有任何东西。我也试图拒绝承诺，但没有效果。

Answer 1

您需要定义可接受的文件类型的列表。如果列表为空，则所有文件都被接受。

<FilePond
    acceptedFileTypes={['image/png']}
    fileValidateTypeDetectType={
      (source, type) => new Promise((resolve, reject) => {
        // Do custom type detection here and return with promise
        resolve(type);
      })
    }
/>