Image 从不同输入上传多幅图像

Image 从不同输入上传多幅图像,image,reactjs,upload,Image,Reactjs,Upload,我希望用户能够改变他的标志图像+主页配置文件图像与不同的输入,但每当我改变其中一个都改变了这是我的上传功能 handleFileUpload( e ) { e.preventDefault(); if (!e.target.files.length > 0)//user canceled selecting a file return var reader = new FileReader(); var file = e.target.fil

我希望用户能够改变他的标志图像+主页配置文件图像与不同的输入,但每当我改变其中一个都改变了这是我的上传功能

handleFileUpload( e ) {
    e.preventDefault();
    if (!e.target.files.length > 0)//user canceled selecting a file
      return  
    var reader = new FileReader();
    var file = e.target.files[0];

      reader.onloadend = ( ) => {
      this.setState({
        imgUrl:  reader.result,
        homeImgUrl:  reader.result,
      });
    }

    reader.readAsDataURL(file)
  }

您从不同的输入中获取图像,但将同一文件设置为两个状态值。而不是根据输入名称动态设置状态。我不习惯FileReader,但设置状态如下:

handeFileChange = ( e ) => {
    ........
    this.setState( { [ e.target.name ]: e.target.files[ 0 ] } );
    .......
}

输入名称必须与您的州名称匹配。这将处理文件更改,然后您可以使用文件上载方法。如果您想通过更改直接上载文件,当然可以使用一种方法。

请指定标记中使用的语言,就像您需要根据目标设置状态一样。当前代码同时设置imgIRL和homeImgUrl的状态。