Question

我是React和Redux的新手，我在构建异步文件上传的最佳方法方面遇到了一些麻烦。

我想要的是

用户点击表单的提交按钮
上传文件，并从服务器
在发送最终POST请求之前，状态会使用这些路径进行更新

我现在想做的是将表单或更高版本的组件传递给动作处理程序，就像这样

// actions.js
// using redux-thunk middleware, so this action creator
// dispatches actions on success and error events
submitForm({ formElement }) {
  return (dispatch, getState) => {
    // ... do some stuff

    fetch('/files', {
      method: 'POST',
      body: new FormData(formElement)
    })
    .then(() => dispatch(uploadSuccess()));
  }
}

这是个坏主意吗？获取FormData比将表单元素传递给动作创建者有更好的方法吗？

Answer 1

感谢Alex Guerra〜

没意识到我可以简单地将事件绑定到文件输入onChange。我现在正在做的是

render() {
  const { onChangeFiles, index } = this.props;
  return (
    // ... some other stuff, then
    <input type="file" onChange={
      (e) => {
        onChangeFiles({ files: e.target.files, index });
      }
    } />
  )
}

然后将这些文件添加到组件的状态。然后，在最终的提交处理程序中，我将POST状态对象中的文件，然后在上载完成后发出最终的帖子请求。

使用Redux处理异步文件上载

1 个答案: