即使我没有收到错误，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，但似乎 return 什么也没有。我也试过拒绝promise，但是没有效果

Answer 1

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

<FilePond
    acceptedFileTypes={['image/png']}
    fileValidateTypeDetectType={
      (source, type) => new Promise((resolve, reject) => {

        // Do custom type detection here and return with promise

        resolve(type);
      })
    }
/>

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

React FilePond (functional component) plugins not working even though I'm not getting errors?

reactjs

react-final-form

filepond