reactjs - 即使我没有收到错误，React FilePond（功能组件）插件也不起作用？

Question

我已经让 FilePond 作为 Final Form 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);
      })
    }
/>