多张图片一张一张上传，带有删除和更改选项，带有预览

Question

我正在尝试使用反应式阿波罗客户端在多视图中一张一张带有更改和删除选项（对于每张上传的图片）的一张一张图片。但是，有了这个，我无法清楚地思考如何轻松地执行此操作，并且引起很多困惑。

Please anyone help me to get rid of this...

**updated**

您好，到目前为止，我正在使用 react-dropzonecomponent ，但是在这里，我仅使用删除选项上传了多个文件。.
在这里，我可以将文件发送到服务器（使用mulitpart表单数据的节点），在数据库中在服务器端创建文件，并将路径仅以路径名存储在数据库中...但是在这里，我无法在前端显示图像文件从后端获得的路径...

const initialState = {
  files: [],
  imagePreviewUrl: []
};

class Image extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = {  ...initialState };  
  }

  componentWillMount() {  
    let {match, data} = this.props;  
    const id = match.params.id && match.params.id.slice(1);  
    if (id) {  
      let currentProduct = (data && data.getProduct) && data.getProduct.find((data) => {
        return data.id == id;  
      });  
      this.setState({
        imagePreviewUrl: currentProduct.images
      });
    }
  }

  handleAdd(file) {  
    console.log(file)  
    var allFiles = this.state.files;  
    allFiles = allFiles.concat([file]);  
    this.setState({
      files: allFiles
    });  
  }  

  handleRemove(file) {  
    let allFiles = this.state.files;  
    this.state.files.forEach((itr, i) => {  
      if (itr.upload.uuid == file.upload.uuid) {  
        allFiles.splice(i, 1)  
      }  
    });  
    this.setState({  
      files: allFiles  
    });  
    console.log(this.state.files, allFiles, file)  
  }   


  render() {  
    let {match, classes, data} = this.props;  
    let {imagePreviewUrl} = this.state;  
    const id = match.params.id && match.params.id.slice(1);  
    var self = this;  
    return (  
      <GridContainer>  
        <DropzoneComponent   
        config={{  
          postUrl: 'no-url',  
          iconFiletypes: ['.jpg', '.png', '.gif'],  
          showFiletypeIcon: true  
        }}  
        eventHandlers=  
        {{   
          addedfile: (file) => this.handleAdd(file),   
          removedfile: (file) => this.handleRemove(file),  
          init: (dropzone) => {  
            console.log(dropzone)  
          }  
        }}  
        djsConfig={{  
          autoProcessQueue: false,  
          addRemoveLinks: true,  
          previewTemplate: ReactDOMServer.renderToStaticMarkup(   
                ...<img data-dz-thumbnail="true" />  ...)}} />  
      </GridContainer>  
    );  
  }  
}  

export default withStyles(style)(Image);