react-image-uploader 在提交按钮上上传

Question

我找到this awesome react package 用于上传多张图片。

一旦通过浏览窗口从文件系统中选择图像，图像就会上传到服务器。我想要的是当我按下“提交”按钮时开始上传它们。所以我只能看到它们的预览，但除非按下按钮，否则它们实际上不会被发送。原因是我有其他数据要与图像一起发送。

我是 React 的初学者，如果有办法实现这一点，有人可以指点我吗？也许扩展 * ImagesUploader* 类？

Answer 1

更新：在查看了您正在使用的包（并阅读了一些代码）之后，您似乎无法（轻松）挂钩到上传触发器 - 也就是说，如果不分叉项目，添加你自己的“暂停”机制，看看他是否会接受公关。

他没有公开任何手动开始上传的钩子，只有onLoadStart()和onLoadEnd()的回调。

我最初的想法是在onLoadStart() 中添加一个生成器函数，它会暂停上传，直到您使用生成器调用next()...但是...这并不容易实现...抱歉。我会留下我原来的答案，以防以后有人需要信息。

将您的函数添加到onChange 事件处理程序，以便在用户选择文件时触发它。您将 on 更改添加到 <input> 元素。

// example

class FileUploadComponent extends React.Component {
  constructor() {
    super()
    this.state = {
      file: ''
    }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  handleChange(e) {
    this.setState({file: e.target.files[0]})
    // do your other "pre-submitted" logic here
  }
  handleSubmit(e) {
    e.preventDefault()
    const { file } = this.state
    // do something with the file
  }
  render() {
    return (
      <div>
        <input type='file' onChange={this.handleChange}/>
        <button onClick={this.handleSubmit}></button>
      </div>
    )
  }
}