React - 允许用户从画廊或相机添加文件答案

【问题标题】：React - Allow user to add file from gallery or cameraReact - 允许用户从画廊或相机添加文件
【发布时间】：2019-05-29 20:30:48
【问题描述】：

我有一个 react-redux 站点，它允许用户从文件系统拖放文件，现在我想让他们在移动设备上做同样的事情- 添加来自相机的屏幕截图或来自图库的文件。

对于桌面上的拖放，我使用的是react-dropzone package。

任何帮助将不胜感激！

【问题讨论】：

标签： reactjs mobile camera gallery

【解决方案1】：

您可以使用该文档中的代码：它允许用户点击 DropZone 并打开一个文件选择器：

class Basic extends React.Component {
  constructor() {
    super()
    this.state = {
      disabled: true,
      files: []
    }
  }

  onDrop(files) {
    this.setState({files});
  }

  toggleDisabled() {
    this.setState({
      disabled: !this.state.disabled
    })
  }

  render() {
    const files = this.state.files.map(file => (
      <li key={file.name}>
        {file.name} - {file.size} bytes
      </li>
    ))

    return (
      <section>
        <aside>
          <button
            type="button"
            onClick={this.toggleDisabled.bind(this)}
          >
            Toggle disabled
          </button>
        </aside>
        <div className="dropzone">
          <Dropzone
            onDrop={this.onDrop.bind(this)}
          >
            {({getRootProps, getInputProps}) => (
              <div {...getRootProps()}>
                <input {...getInputProps()} />
                 <p>Drop files here, or click to select files</p>
              </div>
            )}
          </Dropzone>
        </div>
        <aside>
          <h4>Files</h4>
          <ul>{files}</ul>
        </aside>
      </section>
    );
  }
}

<Basic />

【讨论】：

我知道如何使用这个组件——但它在移动设备上不适合我，这就是我所要求的
你是对的，问题出在我用于文件上传的服务器端代码上，而不是 react-dropzone 问题。所以这个问题可以结束了，谢谢。

【解决方案2】：

正确的答案是 react-dropzone 确实运作良好（截至harish soni 的答案）但这取决于移动版本： react-dropzone 使用所有移动设备不支持的 'input type="file"' html 元素。

为了更好地理解移动支持，请参阅here

【讨论】：