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

Posted 2023-02-21

【中文标题】React - 允许用户从画廊或相机添加文件

【英文标题】：React - Allow user to add file from gallery or camera

【发布时间】：2019-05-29 20:30:48

【问题描述】：

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

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

任何帮助将不胜感激！

【参考方案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