如何在react-dropzone-componen中停止默认的POST操作?

时间:2019-03-27 09:48:01

标签: javascript reactjs dropzone

我想发送请求到axios,而不使用表单中的默认POST请求。我已经创建了发送事件,可以将请求正确发送到axios。

简化代码:

import logo from './logo.svg';
import './App.css';
import DropzoneComponent from 'react-dropzone-component';

export class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showPlaceholder: true,
      filename: '',
      sliceSize: 50144,
      start: 0,
      totalChunks: 0,
      numRequest: 1,
      modalIsOpen: false,
      errorCopie: '',
      modalErrorReportIsOpen: false,
      errorReportLimit: {},
      errorObject: {}
    };

    this.djsConfig = {
      addRemoveLinks: true,
      autoProcessQueue: false,
      headers: true,
      maxFilesize: 2000048,
      params: {
        industry: 'some'
      },
      chunking: true,
      chunkSize: 50144,
      timeout: 60000,
      maxFiles: 1,
      parallelUploads: 5,
      acceptedFiles: '.jpg',
      retryChunks: true,
      retryChunksLimit: 5
    };

    this.componentConfig = {
      iconFiletypes: ['.jpg'],
      showFiletypeIcon: true,
      postUrl: `dummy-url`
    };

    this.dropzone = null;
  }

  handleAddedFile = (file) => {
    console.log("handleAddedFile");
    this.dropzone.processQueue();
    this.handleShowPlaceholder();
  };

  handleRemovedFile = () => {
    console.log("handleRemovedFile");
  };

  handleShowPlaceholder = () => {
    console.log("handleShowPlaceholder");
    this.setState({
      showPlaceholder: !this.state.showPlaceholder
    });
  };

  handleSendingFile = (file, xhr, formData) => {
    console.log("handleSendingFile");

    /* HERE make axios request */

   /* HOW to prevent default behavior with sending request to dummy url */

  };

  handleSuccessFile = (file) => {
    console.log("handleSuccessFile");  
  };

  handleError = (error) => {
    console.log("handleError");
  };


  handlePost() {
    this.dropzone.processQueue();
  }

  render() {
    const config = this.componentConfig;
    const djsConfig = this.djsConfig;

    const eventHandlers = {
      init: (dz) => (this.dropzone = dz),
      addedfile: this.handleAddedFile,
      removedfile: this.handleRemovedFile,
      sending: this.handleSendingFile,
      success: this.handleSuccessFile,
      uploadprogress: this.handleUploadprogress,
      error: this.handleError
    };

    return (
      <div>
        <DropzoneComponent
        config={config}
        eventHandlers={eventHandlers}
        djsConfig={djsConfig}
      />
      <button onClick={this.handlePost.bind(this)}>Upload</button>
      </div>

    );
  }
}


class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Example />
        </header>
      </div>
    );
  }
}

export default App;

我希望将请求发送到我的axios请求,而不将默认请求发送到dummy-url。如何工作?我不想替换url,而是使用事件发送适当的请求。

0 个答案:

没有答案