Как получить предварительный просмотр нескольких изображений в Reactjs - PullRequest
Новая
       21

Как получить предварительный просмотр нескольких изображений в Reactjs

0 голосов
/ 28 апреля 2018

У меня есть работа для предварительного просмотра изображения с помощьюactjs. Но я не понимаю, как просмотреть или отправить предварительный просмотр нескольких изображений. Ниже код работает нормально, но если я выбираю 2 изображения, то он показывает только 1-й предварительный просмотр изображения (заменяет 1-е изображение). Также в моей консоли я получаю длину файла 2, если его 2-е изображение загружено, но при отображении деталей изображения он показывает только 1-е изображение. детали изображения, а не детали обоих изображений. Извините меня за любую синтаксическую ошибку при написании кода здесь:

Конструкторы: 

export default class Test extends Component {

     constructor(props) {

       super(props);
        this.state = {
       imagePreviewUrl: ''
     }
   onChangeFile(event) {
     event.stopPropagation();
     event.preventDefault();
    // var file = event.target.files[0];
   // var index;

     let reader = new FileReader();
    let files = event.target.files;


     var index;
      console.log(files.length);
     for(index = 0;index<files.length;index++){
      var file = files[index];
      this.handleLoadImage(file);
    }
      console.log(file);
     this.setState({file}); /// if you want to upload latter
   }
  handleLoadImage  (file)  {
      var pictures = [];

     if (file) {
       const reader = new FileReader();
       reader.onloadend = () => {
        // as a good practice, use a function to set state
        this.setState(() => ({
          imagePreviewUrl: reader.result,
        }));
        pictures.push({'image':file, 'imagePreviewUrl':reader.result});
      };
      reader.readAsDataURL(file);
    }
     console.log(this.state);
    console.log(pictures);
 }
 render() {
      return (
        <div>
                  <input id="myInput"
                         type="file"
                         ref={(ref) => this.upload = ref}
                        style={{display: 'none'}}
                        onChange={this.onChangeFile.bind(this)} multiple
                   />

    <Button
        label="Open File"
        primary={false}
       onClick={()=>{this.upload.click()}}
    >
    Upload
    </Button>
     <img src={this.state.imagePreviewUrl} height="40px"/>
        </div>
      )
     }
   }
...