Question

我使用react来设计一个使用dropzone-react-component上传多个图像的简单网页，并使用reducer-dispatcher模式（REDUX）提交给服务器。

如何将我在dropzone中排队的文件blob或文件数组传递给reducer。

请找到参考代码：

React Component Class

class ImageUploadClass extends Component {
constructor(props){
  super(props);
this.djsConfig = {
      addRemoveLinks: true,
      acceptedFiles: "image/jpeg,image/png,image/gif,application/pdf",
      autoProcessQueue: false
  };
  this.componentConfig = {
      iconFiletypes: ['.jpg', '.png', '.gif','.pdf'],
      showFiletypeIcon: true,
      postUrl: 'no-url'
  };
  this.dropzone = null;
}

   handleFileAdded(file) {
       console.log(file);
     }

   handlePost() {
    console.log('Final Array'+this.dropzone.getQueuedFiles());
   }

  render() {
    const {handleSubmit, pristine, reset, submitting} = this.props;
    const config = this.componentConfig;
    const djsConfig = this.djsConfig;
    const eventHandlers = {
        init: dz => this.dropzone = dz,
        addedfile: this.handleFileAdded.bind(this)
    }
    return (
      <form onSubmit={handleSubmit(imagesSubmit)}>
        <div style={{'cursor':'pointer'}}>
        <DropzoneComponent config={config} eventHandlers={eventHandlers} djsConfig={djsConfig} />
        </div> 
        <button  className="next action-button" ref={submit => this.submit = submit} type="submit" disabled={submitting} onClick={this.handlePost.bind(this)}>Submit</button>
      </form>
    );
  }
}
ImageUploadClass = reduxForm({
  form: 'ImageUploadClass'
})(ImageUploadClass);

export default ImageUploadClass;

注意：为表单提交定义常量函数

const imagesSubmit = (values,dispatch) =>{
     this.dropzone.getQueuedFiles();
      return dispatch(submitFunctionToDispatcher(values));
    }

已向调度程序发出请求，但未检索到图像文件。我是否需要为其他redux字段定义一个组件？

或者如果有人可以建议我直接将文件上传到S3？

任何帮助将不胜感激！

使用还原形式的dropzone-react-component

0 个答案: