Question

我希望用户能够使用不同的输入更改他的徽标图像+主页个人资料图像，但是当我更改其中一个时，两个都改变了这是我的上传功能

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)
  }

Answer 1

您正在从不同输入获取图像，但将同一文件设置为您的状态值。而不是根据您的输入名称动态设置您的状态。我不习惯FileReader，但设置状态是这样的：

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

输入名称必须与您的州名称匹配。这会处理文件更改，然后您可以使用文件上载方法。如果您想直接上传文件并进行更改，当然可以使用一种方法。

上传来自不同输入的多个图像

1 个答案: