Question

使用React Dropzone：https://github.com/okonet/react-dropzone

它工作得非常好，“突然”它停止工作，但我们不知道什么时候。

它被卡在上传部分。渲染工作，dropzone可用，您可以单击或拖动文件。

但它仍然停留在“立即上传...”并且现在从未实际上传过任何内容。但这已经有一段时间了。

我猜它只是遗漏了一些小东西，因为我们很少更新这个文件。

表单本身位于：http://hrockchurch.com/requests/ pw：HRockCreative

import Dropzone from 'react-dropzone'
import R from 'ramda'
import { Input } from 'react-bootstrap'

import utils from '../lib/utils'
import styles from '../lib/styles'
import Gett from '../lib/gett'

import FileList from './fileList'

export default class CustomDropzone extends React.Component {
  static propTypes = {
    setValue: React.PropTypes.func,
    multiple: React.PropTypes.bool
  }

  static defaultProps = {
    setValue: utils.noop,
    multiple: true
  }

  state = {
    uploading: false,
    dragOver: false,
    files: []
  }

  constructor(props) {
    super(props)
    this.onDrop = this.onDrop.bind(this)
    this.onDragOver = this.onDragOver.bind(this)
    this.onDragLeave = this.onDragLeave.bind(this)
    this.uploadFile = this.uploadFile.bind(this)
    this.removeFile = this.removeFile.bind(this)
  }

  uploadFile(file) {
    this.setState({ uploading: true, dragOver: false })
    Gett.file
      .create(file)
      .then(gtFile => {
        this.addFile(gtFile)
        this.setState({ uploading: false })
      })
  }

  addFile(file) {
    const newFiles = this.state.files.concat(file)
    this.updateFiles(newFiles)
  }

  removeFile(file) {
    const newFiles = R.reject(f => f.id == file.id, this.state.files)
    this.updateFiles(newFiles)
  }

  updateFiles(files) {
    this.setState({ files: files })
    this.props.setValue(R.map(R.prop('url'), files))
  }

  onDrop(files) {
    if (this.state.uploading) return

    R.forEach(this.uploadFile, files)
  }

  onDragOver() {
    if (this.state.uploading) return

    this.setState({ dragOver: true })
  }

  onDragLeave() {
    if (this.state.uploading) return

    this.setState({ dragOver: false })
  }

  getMessage() {
    if (this.state.uploading) {
      return 'Uploading now...'
    }
    if (this.state.dragOver) {
      return 'Yeah, that\'s the right idea!'
    } else {
      return `Drop your file${this.props.multiple ? 's' : ''} here`
    }
  }

  renderDropzone() {
    if (!this.props.multiple && this.state.files.length >= 1) return null

    return (
      <Dropzone onDrop={this.onDrop}
            onDragOver={this.onDragOver}
            onDragLeave={this.onDragLeave}
            style={styles.dropzone}
            disableClick={this.state.uploading}>
       <div>{this.getMessage()}</div>
    </Dropzone>
    )
  }

  render() {
    const label = this.props.label || utils.titleize(this.props.name)

    return (
      <div>
        <Input label={label}>

          {this.renderDropzone()}
          <FileList files={this.state.files} removeFile={this.removeFile} />
          {this.props.children}
        </Input>
      </div>
    )
  }
}

Answer 1

检查我的工作示例，其中还包含服务器示例https://github.com/rofrol/react-dropzone-progress-bar

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Dropzone from 'react-dropzone';
import request from 'superagent';
import { Line } from 'rc-progress';

class App extends Component {
  state = {
    percent: 0
  }

  onDrop = files => {
    this.setState({ percent: 0 });
    let data = new FormData();
    files.forEach(file => {
      data.append('files[]', file, file.name);
    });

    let req = request.post('http://localhost:3001');
    req.on('progress', event => {
      let percent = Math.floor(event.percent);
      if (percent >= 100) {
        this.setState({ percent: 100 });
      } else {
        this.setState({ percent: percent });
      }
    });

    const that = this;
    req.send(data);
    req.end((err, res) => {
      console.log('Successfully uploaded');
    });

  };

  render() {
    const divStyle = {
      border: '1px solid black'
    };
    return (
      <div style={divStyle}>
        <Dropzone onDrop={this.onDrop} className='dropzone-box'>
          <div>Try dropping some files here, or click to select files to upload. {this.state.percent}</div>
          <Line percent={this.state.percent} strokeWidth='1' strokeColor='#2db7f5' strokeLinecap='square' />
        </Dropzone>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 2

设置超时值（例如：超时：3000000 // 5分钟）

React Dropzone陷入上传困境

2 个答案: